如何向浮动图添加新的单点？答案

【问题标题】：How can I add a new, single point to a flot graph?如何向浮动图添加新的单点？
【发布时间】：2012-01-04 12:27:52
【问题描述】：

我正在处理按顺序获得观察结果的数据集。新的数据点需要一次一个地放置在浮动图上。这不是（与previous question 不同）我可以简单地突出显示现有点的情况；我需要添加一个新点。

我知道如何使用 .setData() 向数据系列添加一个新点，然后使用 .draw() 重新绘制图形；但是，当我有数千个点时，这会大大减慢速度，因为我必须每秒完全重绘图形几次。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

你能给一些jqPlot的示例代码吗？我阅读您发布的帮助页面的方式，我必须添加一个系列（包含一个点），然后只重绘那个系列。但是，我无法让它工作。
HighCharts 的 addPoint 方法似乎重绘了整个图表。我不想使用 flot 的原因是因为它会重绘图表，所以 addPoint 没有帮助。
在您的新示例代码中，您将一个点添加到一个系列，然后重绘整个系列。我只想在情节中添加一个点，除了那个点之外不画任何东西。我认为 someChart.series.push({data: x})，然后是新系列索引上的 someChart.drawSeries() 会起作用，但事实并非如此。我现在被困在使用 HTML 画布上。
非常感谢@Mark！顺便说一句，jsfiddle 不再工作了。

【解决方案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);

当然，这将不允许您将点作为系列的一部分访问，但如果您需要简单地向情节添加大量点而不重绘整个情节，这是一种方法。

【讨论】：