HighCharts - 如何創建動態圖表，導出一切

Question

我想導出一個動態生成的圖表，我注意到有些東西不會被導出。例如，我的圖表具有PlotBands，這些PlotBands根據所顯示的數據是動態的。

當我建立我的圖表時，我遵循所有偉大的HighChart示例的標準代碼佈局，我在文檔加載時立即生成圖表。然後在我的代碼中，我使用Ajax調用來加載數據並修改標題，繪圖帶，自定義文本等內容。

問題是，在初始圖表加載後，圖表上任何修改的內容都不會導出爲圖像或PDF文件。我的PlotBands是在Ajax調用期間添加的。它們不能包含在構建於document.load()上的圖表對象中。所以HighCharts很容易忽略它們。

在我的圖表中，我想顯示24小時內在不同地點的能源使用情況。用戶可以選擇不同的日子和不同的網站。繪製帶需要突出顯示運行時間，並且每個站點都有不同的運行小時，這些運行小時將加載數據。此外，圖表標題顯示網站名稱，副標題顯示平方英尺。

此外，我的代碼使用HighCharts渲染器text()命令在圖形底部繪製一些自定義文本。

我對勉強運作的出口代碼看起來是這樣的：

var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: "ChartContainer", 
      type: "line", 
      title: { text: null }, 
      subtitle: { text: null } 
     } 
    } 
}); 

function UpdateChart() { 
    $.ajax({ 
     url: "/my/url.php", 
     success: function(json) { 
      chart.addSeries(json[1]); 
      chart.addSeries(json[2]); 
      chart.setTitle(json[0].title, json[0].subtitle); 
      chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } }); 
      chart.renderer.text("Custom Text", 50, 100); 
     } 
    }); 
} 

不幸的是，標題，積帶和「自定義文本」不會，如果用戶出口圖表出現。

Answer 1

（這裏回答我的問題）

，關鍵是要重新安排你如何建立你的圖表。

請勿在document.load()上生成圖表。在ajax調用的success()函數中生成它。

首先檢查圖表是否已經存在，並且destroy()它。如果您的代碼允許用戶動態更改設置，則會導致執行新的ajax調用，這將需要更新圖形。圖表需要在重建之前銷燬。

現在從頭構建一個新圖表。但是，現在您已經擁有了來自ajax調用所需的數據，因此您可以從頭開始構建正確的信息。 HighCharts只會導出第一次創建圖表時包含的數據。所以所有的自定義數據都需要包含在這裏。如果您需要更改圖表上的某些內容，請將其銷燬並使用自定義數據重建它。

function UpdateChart() { 
    $.ajax({ 
     url: "/my/url.php", 
     success: function(json) { 
      // If the chart exists, destroy it 
      if (chart) chart.destroy(); 

      // Create the chart 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: "ChartContainer", 
        type: "line", 
        events: { 
         load: function(event) { 
          this.renderer.text("Custom Text", 50, 100); 
         } 
        }, 
        title: { text: json[0].title }, 
        subtitle: { text: json[0].sqft } 
       }, 
       plotBands: { 
        color: "#FCFFB9", 
        from: json[0].OpenInterval, 
        to: json[0].CloseInterval, 
        label: { 
         text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } 
        } 
       } 
      }; 

      // Add two data series to the chart 
      chart.addSeries(json[1]); 
      chart.addSeries(json[2]); 

      // Set title and sub-title 
      chart.setTitle(json[0].title, json[0].subtitle); 
     } 
    }); 
} 

現在，圖表會顯示您添加的所有自定義事項。請注意，使用renderer.text()命令寫入圖表的自定義文本將添加到chart.load()事件中。出於某種原因，它只能在這裏工作。

記住關鍵：HighCharts將只導出第一次創建圖表時包含的數據。這將爲您節省很多頭痛。

Answer 2

是的 - 它的可能和highcharts支持你在這裏提到的東西sample codehttp://jsfiddle.net/vijaykumarkagne/9c2vqq7q/動態高圖使用json數據文件託管在谷歌驅動器。

$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){ 
 
     
 
       
 
chart = new Highcharts.Chart({ 
 
     chart: { 
 
      zoomType: 'x', 
 
      type: 'line', 
 
      renderTo: 'container' 
 
     }, 
 
     title: { 
 
      text: ' ' 
 
     }, 
 
     subtitle: { 
 
      text: 'Click and drag in the plot area to zoom in', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      type: 'datetime', 
 
      title: { 
 
       text: ' ' 
 
      } 
 

 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: ' ' 
 
      } 
 
     },   
 

 
     series:[{ 
 
      name: 'Tokyo', 
 
      data: result 
 
     }] 
 

 
    }); 
 
     });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
    <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<body> 
 
<div id="container"></div> 
 
</body>