使用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