logo标签列表

使用jquery.load加载多个Highcharts图表

javascriptjqueryhighcharts
6

我有一个母版页，使用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网站表示此错误为：

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();

然而，并非每次都能成功实现这一点。
5
问题不在于你正在加载两个图表，而是两个Highcharts代码... 我会从Project.prx中删除脚本标签以避免这种情况。如果你需要仅在页面上显示Project.prx，则仅在请求不是AJAX调用时添加脚本标记... - Salketer
3个回答
1
这是Highcharts的合理要求，它声称我正在加载命名空间的第二个实例。然而，这正是我想做的。 我认为这并不是你想做的事情。永远没有必要加载高图库两次。你只需要在同一页上加载两个图表。 简单解决方案： 从prx文件的输出中删除（或者无论你如何加载此文件）。不需要调用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>
1
最好的方法是不要加载已经加载的文件。 您可以通过在主页面中仅加载一次Highcharts并在任何后续加载的Highcharts页面中不加载来实现。
第二种解决方案是将图表放在单独的iframes中。
另一种方法是在Highcharts页面中使用JavaScript加载Highcharts库，同时使用'if'检查是否已经加载。
1
你可以在 iframe 中加载 Project.prx。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接