使用jquery.load加载多个Highcharts
[英]Loading multiple Highcharts with jquery.load
问题描述
I have a master page which calls in other web pages using jquery.load, for example 
例如，我有一个使用jquery.load调用其他网页的母版页
$("#loading").show();
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();
(Project.prx is in an in-house CGI language like ColdFusion, and it's pumping out HTML and JavaScript.) （Project.prx采用内部CGI语言，如ColdFusion，它正在推出HTML和JavaScript。）
In the browser debugger I get error messages like the following every time I click on a link, viz 在浏览器调试器中，每次单击链接时，我都会收到如下错误消息，即
Uncaught Highcharts error #16: www.highcharts.com/errors/16
Highcharts website says of this error: Highcharts网站上说这个错误：
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined.
As I'm using jquery's load() and targeting a div in the current document, it is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. 由于我正在使用jquery的load（）并以当前文档中的div为目标，因此Highcharts声称我正在加载命名空间的第二个实例是公平的。 Nevertheless, this is what I want to do. 不过，这就是我想要做的。
So any idea how to load other Highcharts pages into one with an existing instance of the Highcharts namespace? 那么任何想法如何将其他Highcharts页面加载到具有Highcharts命名空间的现有实例的页面中？
LATER 后来
I have had some success with not putting highcharts in the controller and only in the targets and issuing 我没有在控制器中放置高级图表，只在目标和发布中取得了一些成功
$("#loading").show();
$("#arena").empty();
delete(Highcharts);
$("#arena").load('Project.prx?PID=' + dataReport);
$("#loading").hide();
However, this has not proved successful in every instance. 然而，这并未证明在每种情况下都是成功的。
3 个解决方案
解决方案1
1 2014-11-24 02:25:42
It is a fair call for Highcharts to claim that I'm loading a second instance of the namespace.
I don't think that actually is what you want to do. 我不认为这实际上是你想要做什么。 There is never a reason to load the highcharts library twice. 永远不会有两次加载highcharts库的理由。 You simply want to load two charts on the same page. 您只想在同一页面上加载两个图表。
The simple solution: 简单的解决方案：
Remove <script src="http://code.highcharts.com/highcharts.js"></script> (or however you load this file) from the output of your prx file. 从prx文件的输出中删除<script src="http://code.highcharts.com/highcharts.js"></script> （或者加载此文件）。 No need to call delete(Highcharts); 无需调用delete(Highcharts); I don't think that line even does anything in this case. 在这种情况下，我认为这条线甚至没有做任何事情。
The slightly more robust solution: 更强大的解决方案：
If you need to be able to access Project.prx?id=123 directly through your browser (maybe for testing), you'll need to wrap that output up in full HTML depending on how it's called. 如果您需要能够直接通过浏览器访问Project.prx?id=123 （可能用于测试），则需要根据其调用方式将该输出包装为完整的HTML。
Modern browsers will include the header X-Requested-With: XMLHttpRequest which you can test for in your server code and provide the wrapped or upwrapped chart accordingly; 现代浏览器将包含标题X-Requested-With: XMLHttpRequest ，您可以在服务器代码中测试它并相应地提供包装或上传的图表; however, this method is really not reliable. 但是，这种方法真的不可靠。 A more reliable solution would be to specify how you want it in the query string. 更可靠的解决方案是在查询字符串中指定您希望的方式。 For instance, you could make it so that Project.prx?id=123 will give you: 例如，您可以将它设置为Project.prx？id = 123将为您提供：
<div id="container"></div>
<script type="text/javascript" >
$('#container').highcharts({
...
});
</script>
but Project.prx?id=123&v=test will give you: 但是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>
解决方案2
1 已采纳 2014-11-26 14:50:27
The best would be to do not load loaded files. 最好的方法是不加载加载的文件。 You can do it by loading Highcharts once in main page and do not load in any of later loaded Highcharts pages. 您可以通过在主页面中加载一次Highcharts并且不在任何后续加载的Highcharts页面中加载来实现。
Second solution is to put charts in separate iframes. 第二种解决方案是将图表放在单独的iframe中。
Another way is to load Highcharts library in JavaScript in Highcharts pages while using 'if' to check if it is already loaded. 另一种方法是在Highcharts页面中加载JavaScript中的Highcharts库，同时使用“if”检查它是否已经加载。
解决方案3
1 2014-11-29 19:19:33
您可以在iframe中加载Project.prx。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.