如何添加一个新的单点到一个浮点图？

我正在处理依次获取观测值的数据集。新数据点需要一次一个地放在一个浮动图上。这是而不是一个案例（不像这个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

如何添加一个新的单点到一个浮点图？

回答

相关问题