Динамический график флота - показать строку скрыть, нажав на текст легенды или поле на графике

15

Я работаю над динамическим графиком флота с 3 сериями. Мне нужно скрыть / показать серию при нажатии на легенду. Я видел разные примеры, которые будут отлично работать для статических графиков, но для динамического графика, даже если он работает в первый раз, но когда график обновляется новыми значениями данных, тогда все отображается с настройками по умолчанию. как только я скрою серию, я хочу, чтобы она была скрыта, пока я не нажму снова, чтобы показать ее.

    
задан user1908522 07.01.2013 в 19:34
источник

2 ответа

29

Вот быстрый пример , который я собрал для вас.

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>';
        }
    }
});
    
ответ дан Mark 09.01.2013 в 03:14
  • Этот код работает, но показывает серию снова, когда этот график в реальном времени обновляется через 10 секунд с новой точкой данных. Мне нужно скрыть серию на графике, пока я не нажму на легенду. пожалуйста, дайте мне знать –  user1908522 09.01.2013 в 19:12
  • Как вы обновляете свой график? Если вы хотите, чтобы люди вам помогли, вам нужно предоставить достаточно информации ... –  Mark 09.01.2013 в 19:25
  • Привет, Марк, я разместил детали и код. У вас был шанс посмотреть на него –  user1908522 09.01.2013 в 21:56
  • @ user1908522, просто посмотрел на него. Проблема в том, что вы воссоздаете сюжет для каждого успеха ajax. Это перезаписывает «видимость» линии. Вы должны нарисовать график один раз, а затем использовать методы getData и setData для обновления данных. Если вы каждый раз воссоздаете его, вам нужно будет установить линию на видимую или нет в вызове $ .plot. –  Mark 10.01.2013 в 00:59
  • @bonez, строка 26, вам не хватает другого, если: jsfiddle.net/8kyz6jr3/1 –  Mark 21.12.2015 в 14:53
Показать остальные комментарии
0

Вот мой код. В принципе, я получаю данные от 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>
    
ответ дан user1908522 09.01.2013 в 20:02