使用 jquery.load 加载多个 Highcharts答案

【问题标题】：Loading multiple Highcharts with jquery.load使用 jquery.load 加载多个 Highcharts
【发布时间】：2014-11-21 07:21:58
【问题描述】：

我有一个母版页，它使用 jquery.load 调用其他网页，例如

$("#loading").show();
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();

（Project.prx 是一种内部 CGI 语言，如 ColdFusion，它输出 HTML 和 JavaScript。）

在浏览器调试器中，每次单击链接时都会收到如下错误消息，即

Uncaught Highcharts error #16: www.highcharts.com/errors/16

Highcharts 网站提到了这个错误：

Highcharts 错误 #16

页面中已经定义了Highcharts

此错误在第二次在同一页面中加载 Highcharts 或 Highstock 时发生，因此已经定义了 Highcharts 命名空间。请记住，Highcharts.Chart 的构造函数和 Highcharts 的所有功能都包含在 Highstock 中，因此如果您将 Chart 和 StockChart 组合运行，则只需加载 highstock.js 文件即可。

当我使用 jquery 的 load() 并在当前文档中定位一个 div 时，Highcharts 声称我正在加载命名空间的第二个实例是合理的要求。不过，这就是我想做的。

那么知道如何使用现有的 Highcharts 命名空间实例将其他 Highcharts 页面加载到一个页面中吗？

稍后

我已经取得了一些成功，没有将 highcharts 放在控制器中，而只放在目标中并发布

$("#loading").show();
$("#arena").empty();
delete(Highcharts);
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();

然而，这并非在所有情况下都成功。

【问题讨论】：

问题不在于您正在加载两个图表，而是两个 highcharts 代码......我要做的是从 Project.prx 中删除脚本标签以避免这种情况。如果您需要在页面上单独显示 Project.prx，则仅在请求不是 AJAX 调用时添加脚本标记...

标签： javascript jquery highcharts

【解决方案1】：

最好不要加载已加载的文件。您可以通过在主页中加载一次 Highcharts 来做到这一点，并且不要在以后加载的任何 Highcharts 页面中加载。

第二种解决方案是将图表放在单独的 iframe 中。

另一种方法是在 Highcharts 页面的 JavaScript 中加载 Highcharts 库，同时使用 'if' 来检查它是否已经加载。

【讨论】：

【解决方案2】：

Highcharts 声称我正在加载第二个是公平的要求命名空间的实例。不过，这就是我想做的。

我不认为这实际上是你想要做的。从来没有理由加载 highcharts 库两次。您只是想在同一页面上加载两个图表。

简单的解决方案：

从您的 prx 文件的输出中删除 <script src="http://code.highcharts.com/highcharts.js"></script>（或者您加载此文件）。无需致电delete(Highcharts);，我认为在这种情况下，这条线路甚至没有任何作用。

稍微更健壮的解决方案：

如果您需要能够直接通过浏览器访问Project.prx?id=123（可能是为了测试），您需要根据调用方式将该输出包装成完整的 HTML。

现代浏览器将包含标题X-Requested-With: XMLHttpRequest，您可以在服务器代码中对其进行测试，并相应地提供包装或向上包装的图表；但是，这种方法确实不可靠。更可靠的解决方案是在查询字符串中指定您想要的方式。例如，您可以让 Project.prx?id=123 为您提供：

<div id="container"></div>
<script type="text/javascript" >
    $('#container').highcharts({
       ...
    });
</script>

但是 Project.prx?id=123&v=test 会给你：

<!DOCTYPE html>
<html>
<head>
    <title>Data Report 123</title>
    <script src="//code.jquery.com/jquery-2.1.0.js" type="text/javascript" ></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript" ></script>
</head>
    <body>
        <div id="container"></div>
        <script type="text/javascript" >
            $('#container').highcharts({
            ...
            });
        </script>
    </body>
</html>

【讨论】：

【解决方案3】：

您可以在 iframe 中加载 Project.prx。

【讨论】：