如何添加一個新的單點到一個浮點圖？

我正在處理依次獲取觀測值的數據集。新數據點需要一次一個地放在一個浮動圖上。這是而不是一個案例（不像這個previous question）我可以簡單地突出一個現有的點;我需要添加一個新點。我知道如何用.setData（）添加一個新點到數據系列，然後用.draw（）重繪圖。但是，當我有數千個點時，這會使事情變得非常緩慢，因爲我必須每秒重繪一次圖形。如何添加一個新的單點到一個浮點圖？

所以 - 有什麼方法可以簡單地爲圖表添加一個點嗎？或者，如果我不能使用flot這個，有沒有人有任何建議的JavaScript庫，讓我創建一個情節和順序添加點？

來源

2012-01-04 richarddmorey

Flot不支持重繪單個系列。如果你更新它預計重繪整個情節。 jqPlot和HighCharts（addPoint方法）都支持這一點。 HighCharts對此有點更多瞭解，您可以添加一個點，它會重新繪製/重新調整所需的內容。添加一個點可以是可能導致大量的重新劃分，如果它改變打印比例（軸渲染，等...）

編輯

Here is a working example。您必須在瀏覽器中緩存jqPlot文件，因爲它們不允許盜鏈。

someData = [[[]]]; 

someChart = $.jqplot('chart1', someData, { 
    axes: { 
     xaxis: {max:10,min:0}, 
     yaxis: {max:10,min:0} 
    } 
}); 

$('#target').click(function() { 
    seriesObj = someChart.series[0]; 
    seriesObj.data.push([Math.random() * 10, Math.random() * 10]); 
    someChart.drawSeries({},0); 
});

重新閱讀文檔，你是正確的，Highcharts重繪整個情節。我認爲它比這更精緻。

來源

2012-01-04 14:14:44 Mark

你可以舉一些jqPlot的例子代碼嗎？我閱讀您發佈的幫助頁的方式，我必須添加一個系列（包含一個點），然後重新繪製該系列。但是，我無法得到這個工作。 – richarddmorey 2012-01-07 15:59:52

看來HighCharts的addPoint方法會重繪整個圖表。我不想使用flot的原因是因爲它重繪了圖表，所以addPoint沒有幫助。 – richarddmorey 2012-01-07 18:54:57

@ user1129889，請參閱編輯... – Mark 2012-01-07 21:23:21

最好的我發現這樣做是通過訪問畫布本身並直接繪製，就像這樣：

// Get the axis, so that we can figure out what canvas coordinates 
// correspond to our plot coordinates 
xAxis = plot.getXAxes()[0]; 
yAxis = plot.getYAxes()[0]; 
// determine how much space flot left on the edges of the graphs 
offset = plot.getPlotOffset(); 

// get the context, so that we can draw on the canvas   
ctx = plot.getCanvas().getContext("2d"); 
// Convert our coordinates to canvas coordinates 
x1 = xAxis.p2c(plotX) + offset.left; 
y1 = yAxis.p2c(plotY) + offset.top; 

// draw a translucent, red rectangle   
ctx.fillStyle = "rgba(200,0,0,.1)"; 
ctx.fillRect (x1, y1, 5, 5);

當然，這不會讓你爲部分點的任何訪問但是如果您只需要將很多點添加到一個情節而不重繪整個情節，那麼這是一種方法。

來源

2012-01-24 15:19:58 richarddmorey

如何添加一個新的單點到一個浮點圖？

回答

相關問題