2016-09-30 2 views
0

サーバから送信された動的データを持つ同じページに複数のハイチャートを描画したい。
私は複数のチャートを作成し、それらにデータを動的に供給しましたが、最後のチャートだけがレンダリングされ、他はすべて空白です。
が追加されましたが、がプロットされていません。です。

また、「ランダムデータを読み込む」を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); 
} 

は、ドキュメントの体に新しいdivを追加する方法が正常に動作していないjsFiddle

答えて

0

上の同じコードです。あなたは(あなたがjQueryのをロードしているので)jQueryのappend()

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

デモ使用することができます:それは働いたhttps://jsfiddle.net/m9k4eb42/1/

+0

ありがとう、:) を... –

関連する問題