Question

我正在处理数据集，其中依次获得观察结果。需要将新数据点一次放在一个flot图上。这是不的情况（与此previous question不同）我可以简单地突出显示现有点;我需要添加一个新点。

我知道如何使用.setData（）向数据系列添加新点，然后使用.draw（）重绘图形;然而，当我有数千个点时，这会让事情变得非常缓慢，因为我必须每秒重绘几次图形。

那么 - 有什么方法可以简单地为情节添加一个点吗？或者，如果我不能使用flot，有没有人对javascript库有任何建议，可以让我创建一个情节并按顺序添加点？

Answer 1

Flot不支持重绘单个系列。如果你更新它，期望重绘整个图。 jqPlot和HighCharts（addPoint方法）都支持此功能。 HighCharts对此更加谨慎，你添加一个点，它将重绘/重新缩放所需的内容。如果改变绘图比例（轴渲染器等等），添加单个点可能会导致大量重绘。

<强> EDITS

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重绘整个情节。我认为它比那更精致。

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

当然，这不允许您作为系列的一部分访问这些点，但如果您只需要在不重绘整个绘图的情况下向绘图添加大量点，这就是一种方法。< / p>

如何向flot图表添加新的单点？

2 个答案: