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

Question

我正在研究 3 个系列的动态流图。我需要在单击图例时隐藏/显示系列。我见过不同的例子，它们适用于静态图，但适用于动态图，即使它第一次工作，但当用新数据值更新图时，所有内容都以默认选项显示。一旦我隐藏了系列，我希望它被隐藏，直到我再次单击以显示它。
这是我的代码。基本上，我从 JSON 获取数据并以 10 秒的间隔动态更新浮图。所以新数据将每 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>

Answer 1

这是一个 quick example我为你整理好了。

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