使用highcharts.js的仪表板

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

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

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

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

---

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

假设您可以控制正在渲染的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);
})

---

然而，这个简单的例子不能满足highcharts仍在加载时的并发请求。所以对于像这样的条件加载，我会考虑使用一个库，比如，or，它可以为您处理这些依赖关系。然后，您可以随时在组件中包含HighCharts脚本，并且只加载一次。

为什么要在每个跨度中加载HighCharts？文档加载时，只需加载一次

Highcharts不需要在每次刷新图表时加载…它已经在那里了

---

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

当您说“数据由ajax获取”时，您是指包含标记的HTML Snipbit吗？在这种情况下，你为什么不把数据发回去呢？如果您必须发回HTML和脚本标记，请查看处理这种依赖关系的RequireJS。问题是我无法区分页面加载和图表刷新，因此这种方法对我不起作用。你能建议一些在客户端使用js处理这个问题的方法吗？我需要更多的信息-你能详细说明一下你是如何加载/刷新图表的吗？或者您可以共享代码吗？@cirrus在刷新图表区域（）时，图表区域（）将已经有HighCharts.js，刷新尝试再次包含HighCharts.js，这将导致错误#16。正如我前面提到的，如果已经定义了highcharts，我试图通过设置window.highcharts=null来克服这个问题，但这会导致渲染问题。如果我刷新一个图表，其他图表将被剥离（部分渲染）。如果有更好的办法解决这个问题，请告诉我。还有，在3.0中引入此错误有什么具体原因吗？@user2317558为什么您不能只将highcharts.js作为脚本附加到头部，然后只对特定图表进行线性化？通过ajax，您可以获取数据（即通过JSON或其他方式）并初始化图表。好的，我尝试了您提到的方法-添加了所有位于顶部（位于主体内部）标记的HighCharts。。。现在，当我尝试打开仪表板时，我得到以下错误，这是堆栈跟踪………UncaughtTypeError:undefined不是函数highcharts.src.jsx:6707。。。你能告诉我为什么我会看到这个错误吗？不能不知道你做了什么。是否有一个实时网站，或者你可以创建一个小提琴？顺便提一句为什么您要下载HTML而不仅仅是ajax中的JSON，并将数据传递给highcharts？您记得先包含jQuery吗？请注意，使用RequireJS&setting window的组合。highcharts=null对我们来说是有效的，尽管我们遇到了与使用highcharts的第三方仪表盘引擎的冲突想改用Highstock。这两个引擎似乎无法协同工作，但我们无法控制第三方引擎。此外，他们对海图的使用也没有记录在案。