浮动图表：将复选框添加到切换图表系列

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是绝对定位。另外，在您的选项中，您有两种不同的图例配置。删除第二个。