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

问题描述

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

这是我的代码.基本上，我从 JSON 获取数据并以 10 秒的间隔动态更新浮图图.所以新数据将每 10 秒显示一次，这就是系列再次显示的地方.

 
，则向前移动刻度线10如果 (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);}//绘制图形//$.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);我++;}//获取数据setInterval(fetchData, 10000);});

解决方案

这是一个快速示例为你整理.

somePlot = null;togglePlot = 函数(seriesIdx){var someData = somePlot.getData();someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;somePlot.setData(someData);somePlot.draw();}变量数据 = [{标签:'富'，红色'，数据:[[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]],idx: 0},{标签:'酒吧'，颜色:'蓝色'，数据:[[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},{标签:飞镖"，颜色:'绿色'，数据:[[1, 500], [2, 350], [3, 400], [4, 700], [5, 50]],idx:3}];somePlot = $.plot($("#placeholder"), 数据, {系列: {行:{显示:真实}},传奇: {labelFormatter:功能(标签，系列){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 is my code. Basically, I am fetching data from JSON and updating the flot graph dynamically in 10 sec intervals. so new data will be shown every 10 sec and this is where the series is showing back again.

 <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>

解决方案

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屋！