0

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

为了规避这一点，我添加了 js 代码来检查是否已经定义了 HighCharts，如果是，我将其设置为 null 

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

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

请让我知道我所做的是否正确，也请让我知道一种更好的方法来避免加载 HighCharts 已经加载。

4

2 回答 2

2

假设您可以控制正在呈现的 HTML，您需要执行以下任一操作；

  1. 将 highcharts（和其他脚本）作为依赖项放置在页面容器中，以确保它只加载一次。
  2. 有条件地动态加载 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);
})

但是，这个简单的示例在 highcharts 仍在加载时不能满足并发请求。所以对于像这样的条件加载，我会考虑使用像RequireJS、YepNope或HeadJS这样的库来为你处理这些依赖关系。然后，您可以根据需要在组件中包含 HighCharts 脚本，并且它们只会被加载一次。

于 2013-04-30T08:18:03.560 回答
0

为什么要为每个跨度加载高图表？您只需要在文档加载时加载一次。

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

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

于 2013-04-30T19:17:28.263 回答