Javascript 使用jquery.load加载多个Highcharts_Javascript_Jquery_Highcharts

Javascript 使用jquery.load加载多个Highcharts

javascript jquery highcharts

Javascript 使用jquery.load加载多个Highcharts,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,例如，我有一个母版页，它使用jquery.load调用其他网页 $("#loading").show(); $("#arena").load('Project.prx?PID=' + dataReport); $("#loading").hide(); （Project.prx使用类似ColdFusion的内部CGI语言，并输出HTML和JavaScript。）在浏览器调试器中，我每次单击链接时都会收到如下错误消息，即 Uncaug

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

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

（Project.prx使用类似ColdFusion的内部CGI语言，并输出HTML和JavaScript。）

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

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

Highcharts网站指出了这一错误：

高位图表错误#16

已在页面中定义了Highcharts

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

当我使用jquery的load（）并将当前文档中的一个div作为目标时，Highcharts声称我正在加载名称空间的第二个实例是合理的。然而，这正是我想要做的

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

以后

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

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

然而，这并不是在所有情况下都成功

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

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

简单的解决方案：

从prx文件的输出中删除

（或以加载此文件的方式）。无需调用

delete（Highcharts）我认为在这种情况下，这行代码甚至不起任何作用
略为稳健的解决方案：
如果您需要能够通过浏览器直接访问Project.prx？id=123
（可能是为了测试），则需要根据调用方式将该输出打包为完整的HTML
现代浏览器将包括标题X-request-With:XMLHttpRequest
，您可以在服务器代码中测试该标题，并相应地提供包装图或上包装图；然而，这种方法确实不可靠。更可靠的解决方案是在查询字符串中指定所需的方式。例如，您可以使Project.prx？id=123为您提供：
<div id="container"></div>
<script type="text/javascript" >
    $('#container').highcharts({
       ...
    });
</script>

<!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>


$（“#容器”）。高图({
...
});

但是Project.prx？id=123&v=test将为您提供：
<div id="container"></div>
<script type="text/javascript" >
    $('#container').highcharts({
       ...
    });
</script>

<!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>


数据报告123
$（“#容器”）。高图({
...
});
最好不要加载加载的文件。
您可以在主页中加载Highcharts一次，而不在以后加载的任何Highcharts页面中加载
第二种解决方案是将图表放在单独的iFrame中
另一种方法是在Highcharts页面中加载JavaScript中的Highcharts库，同时使用“if”检查库是否已加载。
您可以在iframe中加载Project.prx。
问题不是加载两个图形，而是加载两个Highcharts代码。。。我要做的是从Project.prx中去掉脚本标记以避免这种情况。如果需要在页面上单独显示Project.prx，那么只有在请求不是AJAX调用时才添加脚本标记。。。