javascript - 使用 setOptions 时 Highcharts 未引用错误

Question

我们目前正在使用 DotNet.Highcharts API 将 Highcharts 合并到我们的网站中。但是，在使用 .SetOptions(GlobalOptions) 调用时，我们遇到了一些 JavaScript 引用问题。

我们使用包装类在 Controller 中构建图表，然后使用简单的 View 来渲染它。

在我们的 Controller 中:

Chart chart = new HighCharts("chart-id");
chart.SetOptions(new GlobalOptions { Global = new Global { UseUTC = false; } });
chart.SetPlotOptions()...

我们认为:

@model HighchartWrapper

@(Model.Chart)

图表在 View 中呈现如下:

<script type="text/javascript">
    Highcharts.setOptions({ global: { useUTC: false } });
    var chart05;
    $(document).ready(function() {
    });
</script>

Chrome 正在筹集资金

"Uncaught ReferenceError: Highcharts is not defined"

.setOptions() 语句出错。如果没有这个(以及 .NET 中相应的 .SetOptions() 语句)，图表将正确呈现。如果我离开此页面然后再次返回，图表将开始正确呈现。

我发现操作 ToHtmlString() 返回值以将 .setOptions 调用放入 .ready() 部分可以使图表正确显示。这是其他人不得不采取的方法吗？

Answer 1

您的怀疑是正确的，您需要在 doc Ready 中运行相关代码，如下所示。

$(document).ready(function() {
    var chart = new Highcharts.Chart(options);
});

根据文档，一旦 dom 加载，示例就会全部执行，因此可以安全地假设这是最佳实践，并期望在 javascipt 库中，正在执行的代码将依赖于 .ready 函数。当然，深入研究源代码会回答您的任何进一步问题，但这完全没问题。

<强> Highcharts - How to set options