2016-05-03 21 views
0

こんにちは、私はpiechartを再描画せずにLIVEを更新しようとしています。これは、すべて5秒間コールチャートの読み込み中にハイチャートが表示される - javacript

var i = 0; 
setInterval(function(){ 
    piecharts(i, 1, 2, 3, 4, 5); 
    i++; 
},5000); 

function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data) 
{ 
$('#container').highcharts({ 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie', 
      options3d: { 
       enabled: false, 
       alpha: 45, 
       beta: 0 
      } 
    }, 
    title: { 
     text: 'Number of person in each sector' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.y}</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      depth: 35, 
      dataLabels: { 
       enabled: true, 
       format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'Avg number of person in this sector over the total of ', 
     colorByPoint: true, 
     data: [{ 
      name: 'Sector0', 
      y: sector0Data 
     },{ 
      name: 'Sector1', 
      y: sector1Data 
     },{ 
      name: 'Sector2', 
      y: sector2Data 
     },{ 
      name: 'Sector3', 
      y: sector3Data 
     },{ 
      name: 'Sector4', 
      y: sector4Data 
     }, { 
      name: 'Sector5', 
      y: sector5Data 
     }] 
    }] 
}); 
} 

呼び出される関数です

、私の私が1ずつ増加しますし、私のパイチャートが描画されます、これは正常に動作しますが、それは私のチャートを再描画まま。何かアドバイス?ありがとう。また、ハイチャートのv4.1.8を使用しています

+0

機能の名前に誤字があります(piechartまたはpiecharts) – Brewal

+0

ありがとうございます!打ち間違え。 –

答えて

0

これにはupdate()メソッドを使用する必要があります。 DOM readyイベントであなたのチャートをinitとデータだけを更新するために、関数を呼び出す:

Demo

function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data) 
{ 
    var chart = $('#container').highcharts(); 

    chart.series[0].update({ 
     data: [{ 
       name: 'Sector0', 
       y: sector0Data 
      },{ 
       name: 'Sector1', 
       y: sector1Data 
      },{ 
       name: 'Sector2', 
       y: sector2Data 
      },{ 
       name: 'Sector3', 
       y: sector3Data 
      },{ 
       name: 'Sector4', 
       y: sector4Data 
      }, { 
       name: 'Sector5', 
       y: sector5Data 
     }] 
    }) 
} 
+0

ありがとう、私はこれをテストしている!! –

0

再レンダリングするための理由は、あなたが5秒ごとに新しいグラフを作成することですそのデータを更新するのではなく、あなたのチャート系列データ上のごY点ためupdate methodを呼び出す必要があり

Update pie data jsfiddle

かを見てみましょう。ここで

chart.series[0].data[0].update(y); 

は、データを更新する方法について簡単な例でありますdocumentation for live data

関連する問題