动态幻灯图 - 通过单击图形上的图例文本或框显示隐藏系列 [英] Dynamic Flot graph - show hide series by clicking on legend text or box on graph

问题描述

我正在使用3系列动态浮动图。我的需要是在点击图例时隐藏/显示系列。我已经看到不同的例子，它将适用于静态图形，但对于动态图形，即使它是第一次工作，但是当图形更新为新的数据值时，一切都显示默认选项。一旦我隐藏了系列，我希望它被隐藏，直到我再次点击显示。

解决方案

这是一个快速示例我为您整理了。

  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}，
 {
标签：'baz'，
颜色：'黄色'，
数据：[[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），数据，{
系列：{
行：{
显示：true 
 } 
}，
 legend：{
 labelFormatter：function（label，series）{
 return'< a href =＃onClick =togglePlot（'+ series） idx +'）; return false;>'+ label +'< / a>'; 
} 
} 
}）; 
  

I am working on dynamic flot graph with 3 series. My need is to hide/show series when clicked on legend. I have seen different examples that will work fine for static graphs but for dynamic graph, even it works first time but when graph is updated with new data values then everything is displaying with default options. once I hide the series, I want it to be hided until I click again to show it.

解决方案

Here's a quick example I put together for you.

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>';
        }
    }
});

这篇关于动态幻灯图 - 通过单击图形上的图例文本或框显示隐藏系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！