浮動圖表：將複選框添加到切換圖表系列

Question

設置我的第一個圖表後，我正在添加複選框來切換選擇哪個系列。

FLOT這裏提供一個例子：http://www.flotcharts.org/flot/examples/series-toggle/

現在，當我試圖複製這個我收到提示：「數據集」是不確定的任何人都可以解釋，爲什麼？

如果有人能告訴我爲什麼圖表仍然顯示在圖表裏面，還有額外的積分嗎？

圖的樣子： 查看代碼：

<div class="legend-container"></div> 
<div class="graph-container"> 
<div id="placeholder" class="graph-placeholder"></div> 
</div> 
<p id="choices"></p> 

海圖編：

$(document).ready(function fetchData() { 
function onDataReceived(series) 
{ 
    console.log('recieved data now parsing the data'); 
    var currentdata = $.parseJSON(series); 

    //Testing 
    console.log(currentdata); 
    console.log("series sub-arrays"); 
    console.log(currentdata[0]); 
    console.log(currentdata[1]); 
    console.log(currentdata[2]); 

    var datasets = [ 
     { 
      label: "Current_Out", 
      data: currentdata[0], 
      yaxis: 2, 
      color: '#00C932', 
      points: { fillColor: "#00C932", show: true }, 
      lines: { show: true } 
     }, { 
      label: "Temperature", 
      data: currentdata[1], 
      yaxis: 1, 
      color: "#0062FF", 
      points: { fillColor: "#0062FF", show: true }, 
      lines: {show:true } 
     }] 
    var options = { 
     legend: { 
      show: true, 
      placement: 'outsideGrid', 
      container: $("#legend-container") 
     }, 
     lines: { 
      show: true, 
      fill: false, 
     }, 
     axisLabels: { 
      show: true 
     }, 
     xaxes: [{ 
      mode: "time", 
      timeformat: "%H:%M:%S", 
      axisLabel:'Date', 
      axisLabelUseCanvas: false, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
      axisLabelPadding: 5 

     }], 
     yaxes: [{ 
      position: "left", 
      axisLabel:'Celcius', 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
      axisLabelPadding: 5 

     }, { 
      position: "right", 
      axisLabel: 'mA' 
     }], 
     grid: { 
      hoverable: true, 
      clickable: true, 
      borderWidth: 1 
     }, 
     legend: { 
      labelBoxBorderColor: "none", 
      position: "right" 
     }, 
     points: { 
      show: true, 
      fillColor: "#000000" 
     } 
    }; 

    $.plot($("#placeholder"), datasets, options); 

} 
$.ajax({ 
    url: '/Ajax/GetGraphData', 
    type: "GET", 
    dataType: "json", 
    success: onDataReceived, 
    failure: function() { 
     console.log('Fail!'); 
    } 
}); 

爲jQuery的複選框的

// insert checkboxes 
var choiceContainer = $("#choices"); 
$.each(datasets, function (key, val) { 
    choiceContainer.append('<br/><input type="checkbox" name="' + key + 
          '" checked="checked" id="id' + key + '">' + 
          '<label for="id' + key + '">' 
          + val.label + '</label>'); 
}); 
choiceContainer.find("input").click(plotAccordingToChoices); 


function plotAccordingToChoices() { 
    var data = []; 

    choiceContainer.find("input:checked").each(function() { 
     var key = $(this).attr("name"); 
     if (key && datasets[key]) 
      data.push(datasets[key]); 
    }); 

    if (data.length > 0) 
     $.plot($("#placeholder"), data, { 
      yaxis: { min: 0 }, 
      xaxis: { tickDecimals: 0 } 
     }); 
} 
plotAccordingToChoices(); 

Answer 1

範圍界定問題。 var datasets是本地的onDataReceived函數。它不能在該功能之外訪問。在$(document).ready(處理程序中將它引入null應使其可以訪問該範圍內的所有內容。

至於你的第二個問題，你需要向我們展示附加到這些div的CSS。我猜你的graph-container是絕對定位。另外，在您的選項中，您有兩種不同的圖例配置。刪除第二個。