setExtremes在初始加载后不起作用

Question

下面的setExtremes适用于初始图表。但当我切换页面并再次打开图表或打开新的图表(新的json文件(时，下面的setExtremes停止工作，不再更新min-max。任何关于为什么会发生这种情况的建议。

yAxis[BtnID].setExtremes(val1, val2);

我能让它工作的唯一方法是强制重新加载我的应用程序，然后当我重新打开图表或打开新图表(新的json文件(时它就工作了。下面是我的实际代码。json数据没有问题。我得到了BtnID，val1，val2值很好，只有setExtremes不起作用(第一次起作用，但之后不起作用(。

点击导航栏上的按钮，如下所示，打开一个模态，用户在其中输入val1和val2。然后发送到index.js.

Navbar.razor:

<button @ref="_btn1Ref" id="0" @onclick=OpenDialog1>dialog1</button>
<button @ref="_btn2Ref" id="1" @onclick=OpenDialog2>dialog2</button>

@code{
private MyData model1 = new MyData { val1= 0, val2= 0 };
private MyData model2 = new MyData { val1= 0, val2= 0 };
private IModalDialog? modalDialog;
private async Task OpenDialog1()
{
var request = new ModalRequest { InData = this.model1 };
if (this.modalDialog is not null)
await modalDialog.ShowAsync<MyForm>(request);      
await JSRuntime.InvokeVoidAsync("getValues", this.model1.val1, this.model1.val2, _btn1Ref);
}
...

索引.razor:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
var fileName = @fileNameFromLandingPage;       
await JSRuntime.InvokeVoidAsync("CreateChart", fileName);

}

Index.js:

function CreateChart(fileName) {  
$.getJSON(fileName, function (data) {

var chart = Highcharts.chart('container', {  ....

//Actual code
window.getValues = function (val1, val2, elem) {
var BtnID = elem.getAttribute('id');
yAxis[BtnID].setExtremes(val1, val2);     


// If I directly use onclick ID to setExtremes instead of window.getValues, it always works. But not able to pass dialog val1 val2.Have harcoded below.
$("#0").click(function () {
yAxis[0].setExtremes(4, 8);
});

}
});
}

Answer 1

不确定这是否是问题的原因，但为什么window.getValues嵌套在CreateChart函数中？你的Index.js应该是这样的：

function CreateChart(fileName) {  
$.getJSON(fileName, function (data) {

...
//Actual code
});
}
function getValues(val1, val2, elem) {    
var BtnID = elem.getAttribute('id');
yAxis[BtnID].setExtremes(val1, val2);                  
}