Question

我正在尝试使用highcharts.js构建仪表板（在页面上显示多个图表），这些图表的数据通过ajax获取。每个图表都可以单独刷新。最初，当我试图让这个工作时，我得到了错误＃16，我发现包含了HighCharts.js，并且ajax响应再次发送回HighCharts，因此HighCharts抛出了这个错误。

为了避免这种情况，我添加了js代码以检查是否已经定义了HighCharts，如果是，我将其设置为null

if(window.Highcharts){
    window.Highcharts = null;
}

这似乎解决了这个问题，但是我现在看到，当我刷新一个图表时，仪表板上的其他图表似乎有一些渲染问题 - 其他图表的一部分似乎是被剥夺了。

如果我正在做的事情是对的，请告诉我，还请让我知道一个更好的方法，我可以避免加载HighCharts已经加载。

Answer 1

假设您可以控制正在渲染的HTML，则需要执行以下操作;

将highcharts（和其他脚本）作为依赖项放在页面容器中，这样您就可以确保它只加载一次。
有条件地动态加载HighCharts而不是静态加载。

像这样的事情;

function buildChart(func) {
    if (window.Highcharts === undefined) {
        console.log("Highcharts is not loaded, fetching...");
        $.getScript("http://code.highcharts.com/highcharts.js", function () {
            alert("HighCharts was loaded");
            func(); // build chart
        });
    }
    else {
        console.log("HighCharts was already loaded");
        func(); // build chart
    }


}

// test
buildChart(function () {
    // build chart
    console.log("Read to build chart with:", window.Highcharts);
})

但是，这个简单的示例不支持并发请求，而高图仍在加载。因此，对于像这样的条件加载，我会考虑使用像RequireJS，YepNope或HeadJS这样的库来处理这些依赖关系。然后，您可以根据需要随时在组件中包含HighCharts脚本，并且只会加载一次。

Answer 2

为什么要在每个范围内加载高级图表？您只需在文档加载时加载一次。

每次刷新图表时都不需要加载Highcharts ......它已经存在。

通过ajax刷新单个图表所需要做的就是返回该图表数据的json对象，并使用页面加载时设置的现有选项重新初始化图表。

使用highcharts.js的仪表板

2 个答案: