jQuery Flot을 클릭하여 시리즈를 숨기기

Question

특정 범례 항목을 클릭하면 해당 데이터가 차트에서 사라 지도록 Flot 그래프가 표시됩니다.

이 기능을 제대로 작동시키지 못했습니다. 전설 항목을 클릭 할 수있는 수준까지 올라 왔고 계열 선은 제거되었지만 점이 아니라면 잘못된 선 데이터로 보입니다.

이에 어떤 도움이 정말 감사하겠습니다 :)

var Graphs = function() { 

return { 

    //main function 

    initCharts: function() { 
     if (!jQuery.plot) { 
      return; 
     } 

     function showChartTooltip(x, y, xValue, yValue) { 
      $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({ 
       position: 'absolute', 
       display: 'none', 
       top: y - 40, 
       left: x - 40, 
       border: '0px solid #ccc', 
       padding: '2px 6px', 
       'background-color': '#fff' 
      }).appendTo("body").fadeIn(200); 
     } 

     if ($('#site_revenue').size() != 0) { 
      //site revenue 
      var previousPoint2 = null; 
      var plot_statistics = null; 
      var data = []; 

      togglePlot = function(seriesIdx) 
      { 
       var previousPoint2 = plot_statistics.getData(); 
       previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show; 
       plot_statistics.setData(previousPoint2); 
       plot_statistics.draw(); 
      } 

      $('#site_revenue_loading').hide(); 
      $('#site_revenue_content').show(); 

      var data = [{ 
       label: "Gross Revenue", 
       color: ['#44b5b1'], 
       points: { 
        fillColor: "#44b5b1" 
       }, 
       data: [ 
        ['Sep', 264.41], 
        ['Aug', 6653.98], 
        ['Jul', 921.35], 
        ['Jun', 937.00], 
        ['May', 1839.25], 
        ['Apr', 1561.96], 
        ['Mar', 2289.62], 
        ['Feb', 2661.91], 
        ['Jan', 6021.44], 
        ['Dec', 4129.21], 
        ['Nov', 0.00], 
        ['Oct', 2865.28], 
       ], 
       idx:1 
        },{ 
        label: "Tax", 
        color: ['#8fc2ed'], 
       points: { 
        fillColor: "#8fc2ed" 
       }, 
       data: [ 
        ['Sep', 0.00], 
        ['Aug', 2865.28], 
        ['Jul', 2661.91], 
        ['Jun', 6653.98], 
        ['May', 6021.44], 
        ['Apr', 0.00], 
        ['Mar', 2289.62], 
        ['Feb', 1561.96], 
        ['Jan', 921.35], 
        ['Dec', 937.00], 
        ['Nov', 1839.25], 
        ['Oct', 4129.21] 
       ], 
       idx: 2 
      }]; 

      var plot_statistics = $.plot($("#site_revenue"), data, { 
       series: { 
        lines: { 
         show: true, 
         fill: 0.2, 
         lineWidth: 0, 
         fill: false, 
         lineWidth: 3 
        }, 
        shadowSize: 1, 
        points: { 
         show: true, 
         fill: true, 
         radius: 4, 
         lineWidth: 2 
        }, 
       }, 
       xaxis: { 
        tickLength: 0, 
        tickDecimals: 0, 
        mode: "categories", 
        min: 0, 
        font: { 
         lineHeight: 18, 
         style: "normal", 
         variant: "small-caps", 
         color: "#6F7B8A" 
        } 
       }, 
       yaxis: { 
        ticks: 5, 
        tickDecimals: 0, 
        tickColor: "#eee", 
        font: { 
         lineHeight: 14, 
         style: "normal", 
         variant: "small-caps", 
         color: "#6F7B8A" 
        } 
       }, 
       grid: { 
        hoverable: true, 
        clickable: true, 
        tickColor: "#eee", 
        borderColor: "#eee", 
        borderWidth: 1 
       }, 
       legend: { 
        show: true, 
        placement: 'outsideGrid', 
        container: $('#site_revenue_legend'), 

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

      $("#site_revenue").bind("plothover", function (event, pos, item) { 
       $("#x").text(pos.x.toFixed(2)); 
       $("#y").text(pos.y.toFixed(2)); 
       if (item) { 
        if (previousPoint2 != item.dataIndex) { 
         previousPoint2 = item.dataIndex; 
         $("#tooltip").remove(); 
         var x = item.datapoint[0].toFixed(2), 
          y = item.datapoint[1].toFixed(2); 
         showChartTooltip(item.pageX, item.pageY, item.datapoint[0], '$' + item.datapoint[1]); 
        } 
       } 
      }); 

      $('#site_revenue').bind("mouseleave", function() { 
       $("#tooltip").remove(); 
      }); 
     } 
    } 
}; 

}(); 

jQuery(document).ready(function() { 
    Graphs.initCharts(); // init index page's custom scripts 
}); 

JSFiddle : http://jsfiddle.net/fxc4vyg3/

Answer 1

당신은 피곤해야합니다, 당신은 단지 off-by-one 오류가 있고, 당신은 단지 업데이트라고 라인이 아니라 포인트.

togglePlot = function(seriesIdx) 
{ 
    var previousPoint2 = plot_statistics.getData(); 
    seriesIdx--; // ***HERE*** 
    previousPoint2[seriesIdx].points.show = // ***AND HERE*** 
    previousPoint2[seriesIdx].lines.show = !previousPoint2[seriesIdx].lines.show; 
    plot_statistics.setData(previousPoint2); 
    plot_statistics.draw(); 
} 

여기 고정 바이올린 : 당신의 데이터에서 http://jsfiddle.net/it_turns_out/fxc4vyg3/3/