动态绘图图形 - 通过单击图形上的图例文本或框来显示隐藏系列

Question

我正在研究3系列的动态flot图.我需要在点击图例时隐藏/显示系列.我已经看到了不同的例子,它们可以很好地用于静态图形,但是对于动态图形,即使它第一次工作,但是当使用新数据值更新图形时,一切都显示为默认选项.一旦我隐藏了系列,我希望它被隐藏,直到我再次点击显示它.

Answer 1

这是我为你准备的一个简单例子.

somePlot = null;

togglePlot = function(seriesIdx)
{
  var someData = somePlot.getData();
  someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
  somePlot.setData(someData);
  somePlot.draw();
}

var data = [
    {
    label: 'foo',
    color: 'red',
    data: [[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]],
      idx: 0},
{
    label: 'bar',
    color: 'blue',
    data: [[1, 800], [2, 600], [3, 400], [4, 200], [5, 0]],
      idx: 1},
{
    label: 'baz',
    color: 'yellow',
    data: [[1, 100], [2, 200], [3, 300], [4, 400], [5, 500]],
      idx: 2},
{
    label: 'dart',
    color: 'green',
    data: [[1, 500], [2, 350], [3, 400], [4, 700], [5, 50]],
      idx: 3}
    ];

somePlot = $.plot($("#placeholder"), data, {
    series: {
        lines: {
            show: true
        }
    },
    legend: {
        labelFormatter: function(label, series){
          return '<a href="#" onClick="togglePlot('+series.idx+'); return false;">'+label+'</a>';
        }
    }
});