jqplot折线图中动态传递系列答案

【问题标题】：Dynamically pass series in jqplot line chartjqplot折线图中动态传递系列
【发布时间】：2012-12-20 07:14:58
【问题描述】：

我使用了 jqplot 折线图。我已经使用 ajax 从 php 页面获取数据。在某些情况下，我将显示特定系列。所以

如何在 jqplot 折线图中动态传递系列并设置系列图例？

我已经手动编写了上述要求的代码。我已经在图例系列上应用了点击事件，并根据点击图例绘制图形。

我还根据选择/取消选择系列图例更改了 y 轴值。

【问题讨论】：

我会说在ajax回调中重新创建你的jqplot对象，然后使用replot函数
对不起，我现在工作的地方没有例子，但您只需要使用新系列（值，...）重新创建您的 Jqplot 图，然后调用 plot.replot() where plot是之前创建的 jqplot 对象（plot = $.jqplot('chart', ...
好的，但是在我的代码中，我每次都创建 jqplot 的新对象并绘制图形。我不知道如何在现有对象中传递新的系列值。所以举个例子
这里有一个很好的例子可以启发你：jsfiddle.net/fracu/HrZcj
@sdespont 谢谢很好的例子。我有另一个问题是否可以动态添加另一个系列？，我想根据某些条件在图中动态添加和删除系列。

【解决方案1】：

我最初尝试了@sdespont 发布的答案，但由于该系列需要具备其他属性，因此无法正常工作。我能够通过执行以下操作来完成这项工作：

plot1.data = data;
plot1.replot( data );

data 是一个 3D 数组，其组成与您在创建绘图时传入的相同。如果我做了任何一部分而不做另一部分，它就不会正确刷新，但两者的结合似乎可以解决问题。以这种方式刷新绘图将动态添加或删除我添加到数据数组中的任何系列。

希望对您有所帮助。

【讨论】：

【解决方案2】：

您可以通过使用plot1.series 数组来添加或删除系列。

这是一个很好的 jsfiddle：jsfiddle.net/fracu/HrZcj

想法是用数据创建一个数组

    myNewSerie = Array();
    x = (new Date()).getTime();
    y = Math.floor(Math.random() * 100);
    myNewSerie.push([x, y]);

然后使用下一个可用槽将其添加到图表中

plot1.series[plot1.series.length] = myNewSerie

最后使用plot1.replot();重绘

查看小提琴末尾的updateSeries函数

未经测试，但应该可以工作

【讨论】：

【解决方案3】：

我最近遇到了同样的问题。 “重新绘制”有效，但速度非常慢。我使用了非常快的“jQPlot.drawSeries”。只需像往常一样将您的新系列数据提供给 jQPlot 并致电jQPlot.drawSeries({}, <nr of your series from 0...xxx)

我的带有 800 个值的实时图表在我的 PC 上以 >> 60 FPS 的速度运行，在我的手机上也非常快。

【讨论】：