使用jquery.load加载多个Highcharts

Question

例如，我有一个使用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命名空间的现有实例的页面中？

后来

我没有在控制器中放置高级图表，只在目标和发布中取得了一些成功

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

然而，这并未证明在每种情况下都是成功的。

Answer 1

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>

Answer 2

最好的方法是不加载加载的文件。 您可以通过在主页面中加载一次Highcharts并且不在任何后续加载的Highcharts页面中加载来实现。

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

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

Answer 3

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

使用jquery.load加载多个Highcharts

问题描述

3 个解决方案

解决方案1
1 2014-11-24 02:25:42

解决方案2
1 已采纳 2014-11-26 14:50:27

解决方案3
1 2014-11-29 19:19:33

使用jquery.load加载多个Highcharts

问题描述

3 个解决方案

解决方案1 1 2014-11-24 02:25:42

解决方案2 1 已采纳 2014-11-26 14:50:27

解决方案3 1 2014-11-29 19:19:33

解决方案1
1 2014-11-24 02:25:42

解决方案2
1 已采纳 2014-11-26 14:50:27

解决方案3
1 2014-11-29 19:19:33