Highcharts - 動態+多個圖表無法渲染

Question

我想在同一頁上繪製多個高圖，這些圖表具有從服務器發送的動態數據。
我創建了多個圖表，動態地向它們提供數據，但只有最後一個圖表被渲染，其他所有圖表都是空白的。
我檢查了圖表對象，數據是加但不是繪製。

此外，我將「隨機數據加載」擴展爲3個圖表，我遇到了同樣的問題。
以下是我的代碼：

var create = function(id){ 
document.body.innerHTML += "<div id='c"+id.toString()+"'></div>"; 
$('#c'+id.toString()).highcharts({ 
     chart: { 
      type: 'spline', 
      animation: Highcharts.svg, // don't animate in old IE 
      marginRight: 10, 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + 
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
        Highcharts.numberFormat(this.y, 2); 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Random data', 
      data: (function() { 
       // generate an array of random data 
       var data = [], 
        time = (new Date()).getTime(), 
        i; 

       for (i = 1; i <= 0; i += 1) { 
        data.push({ 
         x: time + i * 1000, 
         y: Math.random() 
        }); 
       } 
       return data; 
      }()) 
     }] 
    }); 
} 

function init(){ 
    create(1); 
    create(2); 
    create(3); 
    setInterval(function(){ 
     for(var i=1;i<Highcharts.charts.length;i++){ 
      var chart = Highcharts.charts[i]; 
      var series = chart.series[0]; 
      var x = (new Date()).getTime(), 
       y = Math.random(); 
      series.addPoint([x,y], true); 
     } 
    },1000); 
} 

這裏是jsFiddle

Answer 1

的方式相同的代碼要添加新的div到文檔的身體不能正常工作。你可以（因爲你是裝的jQuery）使用jQuery的append()

$(document.body).append("<div id='c"+id.toString()+"'></div>"); 

演示：https://jsfiddle.net/m9k4eb42/1/