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

我正在用3个系列研究动态flot图。我的需要是在单击图例时隐藏/显示系列。我看到过不同的例子，它们可以很好地用于静态图，但对于动态图，即使它第一次工作，但当使用新的数据值更新图时，所有内容都显示为默认选项。一旦我隐藏了该系列，我希望它被隐藏，直到我再次单击以显示它

这是我的密码。基本上，我从JSON获取数据，并以10秒的间隔动态更新flot图。因此，新的数据将每10秒显示一次，这就是该系列再次显示的地方

 <div id="placeholder4" style="width:1000px;height:300px;background:#C89175"></div>

 <script type="text/javascript">
     $(function() {
         somePlot = null;

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

         }


// Initilizaiton of Series and Counter
         var i = 0;
         var data_Total = [[], [], []];
         // data_Total[0] : Stip Data
         // data_Total[1] : Decline Data
         // data_Total[2] : Volume Data
//Setting Options for Graph Display
         var options = {

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

            grid: {backgroundColor: "#FCFCFC", labelMargin:12,hoverable: true,tickColor:"#AD5C5C" },
              xaxis: { mode: "categories", show:true,color:"white",axisLabel:'Time Series' },
                         yaxis:{show:true,color:"white",min:0,max:10000,axisLabel:'Total/ Stip/ Decline'}


         }

//Function that will be called recursively with specified Time Interval
         function fetchData() {
//Function that will push data in to Series1 thru an ajax call
             function getDPSStipData(series) {
                 var stipItem = [series.data[i][0], series.data[i][1]];
                 data_Total[0].push(stipItem);
             }
             $.ajax({
                 url: "./JSon/stipdpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSStipData
             });
//Function that will push data in to Series2 thru an ajax call
             function getDPSDeclineData(series) {
                 var declineItem = [series.data[i][0], series.data[i][1]];
                 data_Total[1].push(declineItem);
             }
             $.ajax({
                 url: "./JSon/declinedpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSDeclineData
             });
//Function that will push data in to Series3 thru an ajax call
             function getDPSTotalVolumeData(series) {
                 var totalVolItem = [series.data[i][0], series.data[i][1]];
                 data_Total[2].push(totalVolItem);
             }
             $.ajax({
                 url: "./JSon/totaldpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSTotalVolumeData
             });
//Moving forward the ticks if size > 10
             if (data_Total[0].length > 10)
             {
                 data_Total[0] = data_Total[0].splice(1,10);
                 data_Total[1] = data_Total[1].splice(1,10);
                 data_Total[2] = data_Total[2].splice(1,10);
             }

// Plotting of Graph
             //$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume"},{ data: data_Total[0], label: "Stip",yaxis:2 }, { data: data_Total[1], label: "Decline",yaxis:2 }], options);
 somePlot=$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume",idx:0},{ data: data_Total[0], label: "Stip",color: "green",idx:1 }, { data: data_Total[1], label: "Decline",color:"red",idx:2 }], options);

             i++;
 } 

//fetchData

setInterval(fetchData, 10000);



     });
</script>

$（函数（）{
somePlot=null；
togglePlot=函数（seriesIdx）
{
var someData=somePlot.getData（）；
someData[seriesIdx].lines.show=！someData[seriesIdx].lines.show；
somePlot.setData（someData）；
somePlot.draw（）；
}
//级数与计数器的初始化
var i=0；
var数据_总计=[]、[]、[]；
//数据总量[0]：Stip数据
//数据总量[1]：下降数据
//数据总量[2]：体积数据
//图形显示的设置选项
变量选项={
要点：{show:true}，
//图例：{toggle:true}，
系列：{
行：{show:true}
},
图例：{
labelFormatter：函数（标签，系列）{
返回“”；
}
},
网格：{backgroundColor:#FCFCFC'，labelMargin:12，hoverable:true，tickColor:#AD5C5C}，
xaxis:{mode:“categories”，show:true，color:“white”，axisLabel:“Time Series”}，
yaxis:{show:true，color:“white”，最小值：0，最大值：10000，axisLabel:'Total/Stip/decend'}
}
//将以指定的时间间隔递归调用的函数
函数fetchData（）{
//通过ajax调用将数据推入序列1的函数
函数getDPSStipData（系列）{
var stipItem=[series.data[i][0]，series.data[i][1]；
数据总量[0]。推送（stipItem）；
}
$.ajax({
url:“./JSon/stipdpssec.JSon”，
方法：“GET”，
数据类型：“json”，
成功：getDPSStipData
});
//通过ajax调用将数据推送到Series2的函数
函数GetDpsDclineData（系列）{
var declineItem=[series.data[i][0]，series.data[i][1]；
数据汇总[1]。推送（declineItem）；
}
$.ajax({
url:“./JSon/declinedpssec.JSon”，
方法：“GET”，
数据类型：“json”，
成功：getDPSDeclineData
});
//通过ajax调用将数据推入序列3的函数
函数getDPSTotalVolumeData（系列）{
var totalVolItem=[series.data[i][0]，series.data[i][1]；
数据总量[2]。推送（totalVolItem）；
}
$.ajax({
url:“./JSon/totaldpssec.JSon”，
方法：“GET”，
数据类型：“json”，
成功：getDPSTotalVolumeData
});
//如果大小>10，则向前移动刻度
如果（数据总量[0]。长度>10）
{
数据总量[0]=数据总量[0]。拼接（1,10）；
数据总量[1]=数据总量[1]。拼接（1,10）；
数据总量[2]=数据总量[2]。拼接（1,10）；
}
//图形的绘制
//$.plot（$（“#占位符4”），[{data:data_Total[2]，label:“TotalVolume”}，{data:data_Total[0]，label:“Stip”，yaxis:2}，{data:data_Total[1]，label:“declient”，yaxis:2}]，options）；
somePlot=$.plot（$（“#占位符4”），[{data:data_-Total[2]，label:“TotalVolume”，idx:0}，{data:data_-Total[0]，label:“Stip”，color:“green”，idx:1}，{data:data_-Total[1]，label:“declient”，color:“red”，idx:2}，选项）；
i++；
} 
//获取数据
setInterval（fetchData，10000）；
});

这是我为您准备的一份清单

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

somePlot=null；
togglePlot=函数（seriesIdx）
{
var someData=somePlot.getData（）；
someData[seriesIdx].lines.show=！someData[seriesIdx].lines.show；
somePlot.setData（someData）；
somePlot.draw（）；
}
风险值数据=[
{
标签：“foo”，
颜色：“红色”，
数据：[[1300]，[2300]，[3300]，[4300]，[5300]，
idx:0}，
{
标签：“酒吧”，
颜色：“蓝色”，
数据：[[1800]，[2600]，[3400]，[4200]，[5,0],，
idx:1}，
{
标签：“baz”，
颜色：'黄色'，
数据：[1100]，[2200]，[3300]，[4400]，[5500]，
idx:2}，
{
标签：“飞镖”，
颜色：“绿色”，
数据：[[1500]，[2350]，[3400]，[4700]，[5500]，
idx:3}
];
somePlot=$。plot（$（“#占位符”），数据{
系列：{
线路：{
秀：真的
}
},
图例：{
labelFormatter：函数（标签，系列）{
返回“”；
}
}
});

您可以通过以下方式提供图例单击，从而在重新渲染图形后仍然有效：

HTML:

图例中没有存储任何标记每一行所代表的内容的信息，因此您需要从其他地方引入这些信息-上面的代码所做的只是让您获得所单击的图例项的索引

对于可用性，您应该告诉用户这是可点击的：

CSS:

---

此代码正在工作，但当此实时图形在10秒后使用新数据点刷新时，将再次显示该系列。我需要隐藏图形上的序列，直到再次单击图例。请告诉我您是如何刷新图表的？如果你想让人们帮助你，你必须提供足够的信息…嗨，马克，我已经发布了详细信息和代码。你有机会看一看吗it@user1908522，只是看看。问题是您正在e上重新创建绘图

<div id=graph></div>

$('#graph').on('click', 'div.legend tr', function() {
    var tr = $(this);
    var index = tr.parent().find('tr').index(tr);
    // Do something with the fact they clicked item (index)
});

#graph div.legend tr {
    cursor: pointer;
}