在散點圖中添加新點

我想以異步方式向散點圖添加新點。爲此，散點圖中有一個「添加點」api，它將新發送的數據添加到圖表而不刷新散點圖。在此使用的代碼在散點圖中添加新點

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#container').highcharts({ 
     chart: { 
      type: 'scatter', 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Height Versus Weight of 507 Individuals by Gender' 
     }, 
     subtitle: { 
      text: 'Source: Heinz 2003' 
     }, 
     xAxis: { 
      title: { 
       enabled: true, 
       text: 'Height (cm)' 
      }, 
      startOnTick: true, 
      endOnTick: true, 
      showLastLabel: true 
     }, 
     yAxis: { 
      title: { 
       text: 'Weight (kg)' 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      verticalAlign: 'top', 
      x: 100, 
      y: 70, 
      floating: true, 
      backgroundColor: '#FFFFFF', 
      borderWidth: 1 
     }, 
     plotOptions: { 
      scatter: { 
       marker: { 
        radius: 5, 
        states: { 
         hover: { 
          enabled: true, 
          lineColor: 'rgb(100,100,100)' 
         } 
        } 
       }, 
       states: { 
        hover: { 
         marker: { 
          enabled: false 
         } 
        } 
       }, 
       tooltip: { 
        headerFormat: '<b>{series.name}</b><br>', 
        pointFormat: '{point.x} cm, {point.y} kg' 
       } 
      } 
     }, 
     series: [{ 
      name: 'Female', 
      color: 'rgba(223, 83, 83, .5)', 
      data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], 
       ] 

     }, { 
      name: 'Male', 
      color: 'rgba(119, 152, 191, .5)', 
      data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], 
       ] 
     }] 
    }); 

    function requestData() { 
     var chart = $('#container').highcharts(); 
     var points = [ 
       { 
        x: Math.random() * 100, 
        y:Math.random() * 80 
       } 
      ] 
     var series = chart.series[0];  
     var data; 
     chart.series[1].addPoint([Math.random() * 100,Math.random() * 80]);  
     // call it again after one second 
     setTimeout(requestData, 1000);  
    } 
    requestData();  
    }); 
</script> 
</head> 
<body> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

    </body> 
    </html>

的小提琴是在這裏：http://jsfiddle.net/anirbankundu/T8GT3/1/

任何人都可以讓我知道，如果有加分的陣列，而不是通過增加每一步一步點的任何可能的方式。我將獲取每個呼叫圍繞1000點和點的總數可以去上面100K

感謝， Anirban

來源

2013-08-27 Anirban

使用chart.series[1].data獲得當前的系列數據，然後使用chart.series[1].setData來更新它的數據。

function requestData() { 
    var chart = $('#container').highcharts(), 
     serie = chart.series[1]; 

    // get serie data 
    var data = serie.data; 

    // append points to data 
    for (var i = 0; i < 1000; i++) { 
     data.push([ 
      Math.random() * 100, 
      Math.random() * 80 
     ]); 
    } 

    // update serie data 
    serie.setData(data); 
}

你可以看到它工作here。

更新 - 附加指向當前的數據

function requestData() { 
    var chart = $('#container').highcharts(); 

    // append points to data 
    for (var i = 0; i < 1000; i++) { 
     chart.series[1].addPoint([ 
      Math.random() * 100, 
      Math.random() * 80 
     ], false); 
    } 

    chart.redraw(); 
}

Demo

來源

2013-08-27 03:27:28

這不是附加的現有數據。而是繼續添加新數據 - 即刷新以前檢索的數據。我需要的是追加到現有的數據。 – Anirban

@Anirban所以這種情況下，你可以使用'addPoint'和第二個參數'false'。這會做什麼？將添加一個新點而不渲染圖表。這樣，您可以追加多少點，然後重新繪製圖表。 –

@Anirban看看我的更新。 –

在散點圖中添加新點

回答

相關問題