动态传递系列到jqplot线图中

Question

我使用过jqplot线图。我通过ajax从php页面获取数据。在某些情况下，我将显示特定系列。

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

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

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

- Hkachhia

---

我建议在ajax回调函数中重新创建jqplot对象，然后使用replot函数。 - sdespont

抱歉，我现在工作的地方没有示例，但是您只需要使用新系列（值等）重新创建您的Jqplot图形，然后调用plot.replot()，其中plot是先前创建的jqplot对象（plot = $。jqplot（'chart', ... - sdespont

好的，但是在我的代码中，我每次都要创建一个新的jqplot对象并绘制图形。我不知道如何将新的系列值传递给现有的对象。请给一些例子。 - Hkachhia

这里有一个很好的例子，可以给你灵感：http://jsfiddle.net/fracu/HrZcj/ - sdespont

@sdespont 谢谢，很好的例子。我还有一个问题，是否可以动态添加另一个系列？根据某些条件，我想动态添加和删除图表中的系列。 - Hkachhia

Answer 1

我最初尝试了@sdespont发布的答案，但由于系列需要额外的属性才能正常工作，它并没有正常工作。我通过以下方式使其正常工作：

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

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

希望这有所帮助。

- dmccabe

Answer 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(); 重新绘制

在 Fiddle 的结尾处查看 updateSeries 函数

没有测试，但应该可以工作

- sdespont

---

我从fiddle复制了一个示例，并包含了所有的jqplot图表脚本。当我运行你的代码时，我的浏览器卡住了。为什么？我已经注释掉了setInterval的代码。 - Hkachhia

Answer 3

我最近也遇到了同样的问题。 "replot" 可以解决问题，但速度非常慢。我使用了 "jQPlot.drawSeries"，它非常快。只需像往常一样将新系列数据提供给 jQPlot，并调用 jQPlot.drawSeries({}, <nr of your series from 0...xxx)

我的实时图表有800个值，在我的电脑上运行速度超过60 FPS，在我的手机上也非常快。

- Josef Meier