创建复选框以显示/隐藏flot中的系列

时间:2015-12-16 15:58:14

标签: flot

我正在尝试使用复选框显示/隐藏图表中的每一行。出现复选框但单击它时没有任何反应

https://jsfiddle.net/shorif2000/2pb3yu5t/

    var arrayFromPHP = {
  chartdata: {
    "2G": "[[1450623600000,99.55],[1450620000000,99.54],[1450616400000,99.51],[1450612800000,99.51],[1450609200000,99.5],[1450605600000,99.51],[1450602000000,99.52],[1450598400000,99.55],[1450594800000,99.57],[1450591200000,99.57],[1450587600000,99.58],[1450584000000,99.58],[1450580400000,99.58],[1450576800000,99.57],[1450573200000,99.54],[1450569600000,99.54],[1450566000000,99.53],[1450562400000,99.5],[1450558800000,99.49],[1450555200000,99.5],[1450551600000,99.54],[1450548000000,99.6],[1450544400000,99.6],[1450540800000,99.6],[1450537200000,99.57],[1450533600000,99.52],[1450530000000,99.55],[1450526400000,99.56],[1450522800000,99.54],[1450519200000,99.52],[1450515600000,99.55],[1450512000000,99.59],[1450508400000,99.57],[1450504800000,99.57],[1450501200000,99.57],[1450497600000,99.59],[1450494000000,99.59],[1450490400000,99.58],[1450486800000,99.58],[1450483200000,99.57],[1450479600000,99.58],[1450476000000,99.58],[1450472400000,99.57],[1450468800000,99.57],[1450465200000,99.56],[1450461600000,99.56],[1450458000000,99.55],[1450454400000,99.49],[1450450800000,99.39],[1450447200000,99.36],[1450443600000,99.28],[1450440000000,99.23],[1450436400000,99.17],[1450432800000,99.18],[1450429200000,99.28],[1450425600000,99.34],[1450422000000,99.44],[1450418400000,99.44],[1450414800000,99.46],[1450411200000,99.45],[1450407600000,99.45],[1450404000000,99.35],[1450400400000,99.36],[1450396800000,99.35]]",
      "2G3G": "[[1450623600000,99.53],[1450620000000,99.52],[1450616400000,99.5],[1450612800000,99.49],[1450609200000,99.5],[1450605600000,99.5],[1450602000000,99.51],[1450598400000,99.55],[1450594800000,99.58],[1450591200000,99.58],[1450587600000,99.58],[1450584000000,99.59],[1450580400000,99.58],[1450576800000,99.58],[1450573200000,99.57],[1450569600000,99.57],[1450566000000,99.54],[1450562400000,99.56],[1450558800000,99.58],[1450555200000,99.57],[1450551600000,99.59],[1450548000000,99.62],[1450544400000,99.61],[1450540800000,99.58],[1450537200000,99.57],[1450533600000,99.52],[1450530000000,99.53],[1450526400000,99.53],[1450522800000,99.49],[1450519200000,99.5],[1450515600000,99.53],[1450512000000,99.6],[1450508400000,99.6],[1450504800000,99.6],[1450501200000,99.6],[1450497600000,99.6],[1450494000000,99.6],[1450490400000,99.6],[1450486800000,99.6],[1450483200000,99.6],[1450479600000,99.6],[1450476000000,99.6],[1450472400000,99.58],[1450468800000,99.56],[1450465200000,99.57],[1450461600000,99.56],[1450458000000,99.56],[1450454400000,99.48],[1450450800000,99.38],[1450447200000,99.3],[1450443600000,99.25],[1450440000000,99.16],[1450436400000,99.03],[1450432800000,99.04],[1450429200000,99.14],[1450425600000,99.23],[1450422000000,99.36],[1450418400000,99.37],[1450414800000,99.38],[1450411200000,99.37],[1450407600000,99.37],[1450404000000,99.34],[1450400400000,99.34],[1450396800000,99.34]]",
      "2G3G4G": "[[1450623600000,99.57],[1450620000000,99.56],[1450616400000,99.55],[1450612800000,99.54],[1450609200000,99.56],[1450605600000,99.55],[1450602000000,99.56],[1450598400000,99.59],[1450594800000,99.62],[1450591200000,99.62],[1450587600000,99.63],[1450584000000,99.63],[1450580400000,99.62],[1450576800000,99.62],[1450573200000,99.62],[1450569600000,99.62],[1450566000000,99.59],[1450562400000,99.61],[1450558800000,99.62],[1450555200000,99.62],[1450551600000,99.63],[1450548000000,99.65],[1450544400000,99.65],[1450540800000,99.62],[1450537200000,99.61],[1450533600000,99.55],[1450530000000,99.56],[1450526400000,99.56],[1450522800000,99.53],[1450519200000,99.54],[1450515600000,99.57],[1450512000000,99.64],[1450508400000,99.64],[1450504800000,99.64],[1450501200000,99.64],[1450497600000,99.64],[1450494000000,99.64],[1450490400000,99.63],[1450486800000,99.63],[1450483200000,99.63],[1450479600000,99.62],[1450476000000,99.62],[1450472400000,99.61],[1450468800000,99.6],[1450465200000,99.6],[1450461600000,99.59],[1450458000000,99.59],[1450454400000,99.52],[1450450800000,99.43],[1450447200000,99.34],[1450443600000,99.3],[1450440000000,99.2],[1450436400000,99.07],[1450432800000,99.08],[1450429200000,99.19],[1450425600000,99.28],[1450422000000,99.41],[1450418400000,99.42],[1450414800000,99.42],[1450411200000,99.42],[1450407600000,99.42],[1450404000000,99.39],[1450400400000,99.39],[1450396800000,99.4]]",
      "3G": "[[1450623600000,99.51],[1450620000000,99.52],[1450616400000,99.5],[1450612800000,99.48],[1450609200000,99.5],[1450605600000,99.49],[1450602000000,99.5],[1450598400000,99.54],[1450594800000,99.58],[1450591200000,99.58],[1450587600000,99.58],[1450584000000,99.59],[1450580400000,99.57],[1450576800000,99.58],[1450573200000,99.58],[1450569600000,99.58],[1450566000000,99.55],[1450562400000,99.58],[1450558800000,99.61],[1450555200000,99.6],[1450551600000,99.61],[1450548000000,99.63],[1450544400000,99.61],[1450540800000,99.58],[1450537200000,99.57],[1450533600000,99.51],[1450530000000,99.52],[1450526400000,99.52],[1450522800000,99.48],[1450519200000,99.49],[1450515600000,99.52],[1450512000000,99.6],[1450508400000,99.62],[1450504800000,99.62],[1450501200000,99.61],[1450497600000,99.61],[1450494000000,99.61],[1450490400000,99.61],[1450486800000,99.61],[1450483200000,99.61],[1450479600000,99.6],[1450476000000,99.6],[1450472400000,99.58],[1450468800000,99.56],[1450465200000,99.57],[1450461600000,99.56],[1450458000000,99.56],[1450454400000,99.48],[1450450800000,99.38],[1450447200000,99.28],[1450443600000,99.24],[1450440000000,99.13],[1450436400000,98.98],[1450432800000,98.99],[1450429200000,99.09],[1450425600000,99.19],[1450422000000,99.33],[1450418400000,99.34],[1450414800000,99.35],[1450411200000,99.34],[1450407600000,99.34],[1450404000000,99.33],[1450400400000,99.33],[1450396800000,99.33]]",
      "4G": "[[1450623600000,99.89],[1450620000000,99.84],[1450616400000,99.87],[1450612800000,99.89],[1450609200000,99.95],[1450605600000,99.95],[1450602000000,99.96],[1450598400000,99.95],[1450594800000,99.97],[1450591200000,99.96],[1450587600000,99.96],[1450584000000,99.97],[1450580400000,99.97],[1450576800000,99.98],[1450573200000,99.99],[1450569600000,99.98],[1450566000000,99.97],[1450562400000,99.97],[1450558800000,99.96],[1450555200000,99.96],[1450551600000,99.95],[1450548000000,99.92],[1450544400000,99.92],[1450540800000,99.9],[1450537200000,99.89],[1450533600000,99.84],[1450530000000,99.81],[1450526400000,99.84],[1450522800000,99.82],[1450519200000,99.81],[1450515600000,99.83],[1450512000000,99.93],[1450508400000,99.92],[1450504800000,99.92],[1450501200000,99.92],[1450497600000,99.92],[1450494000000,99.92],[1450490400000,99.85],[1450486800000,99.86],[1450483200000,99.86],[1450479600000,99.84],[1450476000000,99.83],[1450472400000,99.88],[1450468800000,99.85],[1450465200000,99.84],[1450461600000,99.84],[1450458000000,99.84],[1450454400000,99.8],[1450450800000,99.75],[1450447200000,99.67],[1450443600000,99.64],[1450440000000,99.51],[1450436400000,99.34],[1450432800000,99.36],[1450429200000,99.56],[1450425600000,99.69],[1450422000000,99.79],[1450418400000,99.78],[1450414800000,99.78],[1450411200000,99.77],[1450407600000,99.78],[1450404000000,99.77],[1450400400000,99.79],[1450396800000,99.87]]"
  },
  data_rows: 64,
  days: "3",
  days_per_period: 1,
  days_per_period_unavailability: 1,
  filter: "",
  filtersql: "",
  filtersql2: " AND crqcoos is null AND crqinflight is null",
  hours: 1,
  hours_unavailability: 1,
  max_days: 30,
  min: 98,
  period: "hh24",
  tick: 6,
tick_type: "hour",
timeformat: "%a<br>%H:%M %p<br>%d %b"
};
var datasets = {};
choices_CAGraph(arrayFromPHP);

function choices_CAGraph(arrayFromPHP) { //initial load

  //var datasets = [];
  $.each(arrayFromPHP.chartdata, function(i, elem) {
    var jsonObj = $.parseJSON('[' + elem + ']');
    var iLabel = i;

    datasets[i.toLowerCase()] = {
      label: iLabel,
      data: jsonObj[0]
    };
  });
  var i = 0;
  $.each(datasets, function(key, val) {
    val.color = i;
    ++i;
  });
  var choiceContainer_CAGraph = $("#choices_CAGraph");
  $.each(datasets, function(key, val) {
    choiceContainer_CAGraph.append("<input class='cc' type='checkbox' name='" + key + "' checked='checked' id='id" + key + "' value='" + key + "'></input>" + "<label for='id" + key + "'>" + val.label + "</label>");
  });
  //choiceContainer_CAGraph.find("input").click(plotAccordingToChoices());
  var showpoints = false;
  if ((arrayFromPHP.data_rows == 1) && (arrayFromPHP.period == "hh24") && (arrayFromPHP.days == 1))
    showpoints = true;
  else if ((arrayFromPHP.period == "dd" || arrayFromPHP.period == "day" || arrayFromPHP.period == "mon") && arrayFromPHP.days == 1)
    showpoints = true;

  var options = {
    legend: {
      position: "sw",
      noColumns: 5
    },
    yaxis: {
      min: arrayFromPHP.min,
      max: 100
    },
    xaxis: {
      mode: "time",
      timeformat: arrayFromPHP.timeformat,
      tickSize: [arrayFromPHP.tick, arrayFromPHP.tick_type]
    },
    grid: {
      clickable: true,
      hoverable: true
    },
    series: {
      points: {
        show: showpoints
      }
    }

  };

  plotAccordingToChoices(options);

}

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

    $.plot("#CAGraph", data, options);

}

arrayFromPHP是来自ajax请求的json输出。我在这个页面上有5个图表,我试图重用这个功能,所以他们都有显示/隐藏功能。目前勾选框出现但没有任何反应。

0 个答案:

没有答案
相关问题