如何向浮點圖添加新的單點？

Question

我正在使用按順序獲取觀察結果的數據集。 新數據點需要一次放置在一張浮動圖上。 這是不是哪里（不像這樣的情況下， 前面的問題 ），我可以簡單地選擇一個已存在點; 我需要補充一點。

我知道如何使用.setData（）向數據系列添加新點，然后使用.draw（）重新繪制圖形； 但是，當我有成千上萬的點時，這會極大地減慢速度，因為然后我必須每秒完全重畫幾次圖形。

那么-有什么方法可以簡單地向圖中添加點嗎？ 或者，如果我不能使用flot，是否有人對javascript庫有任何建議，這些建議可讓我創建繪圖並按順序添加點？

Answer 1

Flot不支持重畫單個系列。 如果更新，則希望重繪整個圖。 jqPlot和HighCharts （addPoint方法）都支持此功能。 HighCharts與此相關，您可以添加一點，它會重新繪制/重新縮放所需的內容。 如果更改繪圖比例（軸渲染器等），則添加單個點可能會導致大量重繪。

EDITS

這是一個工作示例 。 您必須在瀏覽器中緩存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重繪了整個圖。 我認為它比這更精致。

Answer 2

我發現最好的方法是訪問畫布本身並直接繪制到畫布上，如下所示：

// 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);  

當然，這將不允許您作為系列的一部分來訪問點，但是如果您只需要向圖中添加大量點而無需重繪整個圖，則這是一種方法。