在已渲染的jQuery Flot图表上绘制新系列

Question

我有一个浮点图表，已经渲染了一个数据系列，即：

var plot = $.plot($('#placeholder'), [data1], options);

稍后，我将收到一些新数据，我希望将其作为单独的数据系列添加到相同的图表中。是否有方法可以仅向现有图表添加此新数据系列，而无需重新构建整个图表？也就是说，我想避免再次进行像这样的调用：

var plot = $.plot($('#placeholder'), [data1, data2], options);

而是使用以下方式进行调用：

plot.addSeries([data2], option);

谢谢！

- k-g-f

Answer 1

@Black Box Operations已经很好地概述了一般细节。在最新版本（0.7）之前，当您反复调用$.plot(...)时会出现内存泄漏问题。要么升级到最新版本，要么考虑使用plot.setData()、plot.setupGrid()和plot.draw()方法。您可以从API.txt中获取setData、setupGrid和draw方法的详细信息。

- Ryley

---

感谢@Black Box Operations和@Ryley。所以，我理解你们的回复是说我需要重新绘制整个图表，可能最有效的方法是：var newResult = plot.getData() - k-g-f

是的，肯定没有办法添加一个系列而不重新绘制所有内容...如果您知道新数据不会改变最大/最小x/y值，那么您可能可以跳过setupGrid。 - Ryley

感谢 @Black Box Operations 和 @Ryley。所以，我理解你们的回复是说我需要重新绘制整个图表，可能最有效的方法是： <code>plot.setData(plot.getData().push(data2)); plot.draw()</code>。 - k-g-f

Answer 2

创建一个ajax调用，将您的信息提取并发送到一个能够通过重置图表信息处理多个图表的方法。首先，获取包含您的图表的元素并将其存储在一个变量中，然后创建一个ajax调用来提取创建图表所需的信息。成功后，调用resetGraph并传递信息。

var dataview = $("#placeholder");
$.ajax({
    url: "index.php",
    data: "stuff&junk&things",
    method: 'GET',
    dataType: 'json',
    success: function(msg){
        resetGraph(msg.dataview, msg.data, msg.data_ticks, msg.)
    }
});

function resetGraph(dataview, data, data_ticks ){

    plot = $.plot(dataview, data, {
        points: { show: true, radius: 5 },
        xaxis: { ticks: data_ticks, tickSize: 7 },
        yaxis: {labelHeight: 2}
    });

}

现在，当您需要更改图表时，只需调用脚本，获取信息并在成功后发送到resetGraph，它将相应地更新。

- Black Box Operations