在 float 中为 show/hide 系列创建勾选框
creating tickboxes to show/hide series in flot
我正在尝试 show/hide 使用复选框在图表中的每一行。复选框出现，但单击它时没有任何反应
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 个图表，我正在尝试重用这个函数，所以它们都具有 show/hide 特性。目前出现了勾选框，但没有任何反应。
改变
//choiceContainer_CAGraph.find("input").click(plotAccordingToChoices());
至
choiceContainer_CAGraph.find("input").click(function() { plotAccordingToChoices(options); });
我正在尝试 show/hide 使用复选框在图表中的每一行。复选框出现，但单击它时没有任何反应
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 个图表，我正在尝试重用这个函数，所以它们都具有 show/hide 特性。目前出现了勾选框，但没有任何反应。
改变
//choiceContainer_CAGraph.find("input").click(plotAccordingToChoices());
至
choiceContainer_CAGraph.find("input").click(function() { plotAccordingToChoices(options); });