Я строю линейный график и хочу, чтобы за один раз на моем графике отображалась только одна линия. Когда я отмечаю флажок в моей легенде, я хочу, чтобы он был снят по умолчанию и наоборот. В настоящее время я хочу иметь возможность проверять и снимать их, но я не знаю, как это сделать, чтобы это было только по одному за раз.
Вот как выглядит моя диаграмма прямо сейчас, поскольку вы вижу, что все они отмечены
Я хочу, чтобы это было по одному за раз, как это: , поэтому, когда человек ставит новый флажок, Тот, кто был отмечен
Это мой сценарий:
if ($("#flot-toggle").length) {
var togdatasets = {
"qualitycorework": {
label: "@Resource.QualityCoreWork",
colors: "#FFC107;",
data: [
[ 1, @ViewBag.PillarWeeks[0].QualityCoreWork],
[ 2, @ViewBag.PillarWeeks[1].QualityCoreWork],
[ 3, @ViewBag.PillarWeeks[2].QualityCoreWork],
[ 4, @ViewBag.PillarWeeks[3].QualityCoreWork],
[ 5, @ViewBag.PillarWeeks[4].QualityCoreWork],
[ 6, @ViewBag.PillarWeeks[5].QualityCoreWork],
[ 7, @ViewBag.PillarWeeks[6].QualityCoreWork],
[ 8, @ViewBag.PillarWeeks[7].QualityCoreWork],
[ 9, @ViewBag.PillarWeeks[8].QualityCoreWork],
[ 10, @ViewBag.PillarWeeks[9].QualityCoreWork],
[ 11, @ViewBag.PillarWeeks[10].QualityCoreWork],
[ 12, @ViewBag.PillarWeeks[11].QualityCoreWork],
[ 13, @ViewBag.PillarWeeks[12].QualityCoreWork],
[ 14, @ViewBag.PillarWeeks[13].QualityCoreWork]
]
},
"workfullpotential": {
label: "@Resource.WorksFullPotential",
colors: "#FFC107",
data: [
[ 1, @ViewBag.PillarWeeks[0].WorksFullPotential],
[ 2, @ViewBag.PillarWeeks[1].WorksFullPotential],
[ 3, @ViewBag.PillarWeeks[2].WorksFullPotential],
[ 4, @ViewBag.PillarWeeks[3].WorksFullPotential],
[ 5, @ViewBag.PillarWeeks[4].WorksFullPotential],
[ 6, @ViewBag.PillarWeeks[5].WorksFullPotential],
[ 7, @ViewBag.PillarWeeks[6].WorksFullPotential],
[ 8, @ViewBag.PillarWeeks[7].WorksFullPotential],
[ 9, @ViewBag.PillarWeeks[8].WorksFullPotential],
[ 10, @ViewBag.PillarWeeks[9].WorksFullPotential],
[ 11, @ViewBag.PillarWeeks[10].WorksFullPotential],
[ 12, @ViewBag.PillarWeeks[11].WorksFullPotential],
[ 13, @ViewBag.PillarWeeks[12].WorksFullPotential],
[ 14, @ViewBag.PillarWeeks[13].WorksFullPotential]
]
},
"communication": {
label: "Communication",
colors: "#dc3545",
data: [
[ 1, @ViewBag.PillarWeeks[0].Communication],
[ 2, @ViewBag.PillarWeeks[1].Communication],
[ 3, @ViewBag.PillarWeeks[2].Communication],
[ 4, @ViewBag.PillarWeeks[3].Communication],
[ 5, @ViewBag.PillarWeeks[4].Communication],
[ 6, @ViewBag.PillarWeeks[5].Communication],
[ 7, @ViewBag.PillarWeeks[6].Communication],
[ 8, @ViewBag.PillarWeeks[7].Communication],
[ 9, @ViewBag.PillarWeeks[8].Communication],
[ 10, @ViewBag.PillarWeeks[9].Communication],
[ 11, @ViewBag.PillarWeeks[10].Communication],
[ 12, @ViewBag.PillarWeeks[11].Communication],
[ 13, @ViewBag.PillarWeeks[12].Communication],
[ 14, @ViewBag.PillarWeeks[13].Communication]
]
},
"teamwork": {
label: "@Resource.TeamWork",
colors: "#28a745;",
data: [
[ 1, @ViewBag.PillarWeeks[0].TeamWork],
[ 2, @ViewBag.PillarWeeks[1].TeamWork],
[ 3, @ViewBag.PillarWeeks[2].TeamWork],
[ 4, @ViewBag.PillarWeeks[3].TeamWork],
[ 5, @ViewBag.PillarWeeks[4].TeamWork],
[ 6, @ViewBag.PillarWeeks[5].TeamWork],
[ 7, @ViewBag.PillarWeeks[6].TeamWork],
[ 8, @ViewBag.PillarWeeks[7].TeamWork],
[ 9, @ViewBag.PillarWeeks[8].TeamWork],
[ 10, @ViewBag.PillarWeeks[9].TeamWork],
[ 11, @ViewBag.PillarWeeks[10].TeamWork],
[ 12, @ViewBag.PillarWeeks[11].TeamWork],
[ 13, @ViewBag.PillarWeeks[12].TeamWork],
[ 14, @ViewBag.PillarWeeks[13].TeamWork]
]
},
"leadership": {
label: "LeaderShip",
colors: "#1874BF;",
data: [
[1, @ViewBag.PillarWeeks[0].Leadership],
[2, @ViewBag.PillarWeeks[1].Leadership],
[3, @ViewBag.PillarWeeks[2].Leadership],
[4, @ViewBag.PillarWeeks[3].Leadership],
[5, @ViewBag.PillarWeeks[4].Leadership],
[6, @ViewBag.PillarWeeks[5].Leadership],
[7, @ViewBag.PillarWeeks[6].Leadership],
[8, @ViewBag.PillarWeeks[7].Leadership],
[9, @ViewBag.PillarWeeks[8].Leadership],
[10, @ViewBag.PillarWeeks[9].Leadership],
[11, @ViewBag.PillarWeeks[10].Leadership],
[12, @ViewBag.PillarWeeks[11].Leadership],
[13, @ViewBag.PillarWeeks[12].Leadership],
[14, @ViewBag.PillarWeeks[13].Leadership]
]
},
"individualcontribution": {
label: "@Resource.IndividualContribution",
colors: "#1874BF;",
data: [
[ 1, @ViewBag.PillarWeeks[0].IndividualContribution],
[ 2, @ViewBag.PillarWeeks[1].IndividualContribution],
[ 3, @ViewBag.PillarWeeks[2].IndividualContribution],
[ 4, @ViewBag.PillarWeeks[3].IndividualContribution],
[ 5, @ViewBag.PillarWeeks[4].IndividualContribution],
[ 6, @ViewBag.PillarWeeks[5].IndividualContribution],
[ 7, @ViewBag.PillarWeeks[6].IndividualContribution],
[ 8, @ViewBag.PillarWeeks[7].IndividualContribution],
[ 9, @ViewBag.PillarWeeks[8].IndividualContribution],
[ 10, @ViewBag.PillarWeeks[9].IndividualContribution],
[ 11, @ViewBag.PillarWeeks[10].IndividualContribution],
[ 12, @ViewBag.PillarWeeks[11].IndividualContribution],
[ 13, @ViewBag.PillarWeeks[12].IndividualContribution],
[ 14, @ViewBag.PillarWeeks[13].IndividualContribution]
]
},
"reliability": {
label: "@Resource.Reliability",
colors: "#1874BF;",
data: [
[ 1, @ViewBag.PillarWeeks[0].Reliability],
[ 2, @ViewBag.PillarWeeks[1].Reliability],
[ 3, @ViewBag.PillarWeeks[2].Reliability],
[ 4, @ViewBag.PillarWeeks[3].Reliability],
[ 5, @ViewBag.PillarWeeks[4].Reliability],
[ 6, @ViewBag.PillarWeeks[5].Reliability],
[ 7, @ViewBag.PillarWeeks[6].Reliability],
[ 8, @ViewBag.PillarWeeks[7].Reliability],
[ 9, @ViewBag.PillarWeeks[8].Reliability],
[ 10, @ViewBag.PillarWeeks[9].Reliability],
[ 11, @ViewBag.PillarWeeks[10].Reliability],
[ 12, @ViewBag.PillarWeeks[11].Reliability],
[ 13, @ViewBag.PillarWeeks[12].Reliability],
[ 14, @ViewBag.PillarWeeks[13].Reliability]
]
}
};
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(togdatasets, function (key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices");
$.each(togdatasets, function (key, val) {
choiceContainer.append("<br/><input class='iCheck' type='checkbox' name='" + key +
"' checked='checked' id='id" + key + "'></input>" +
"<label class='form-label' style=\"color:" + val.colors + "\" for='id" + key + "'>" + val.label + "</label>");
});
// if icheck is not applied, then use this code below
//choiceContainer.find("input").click(plotAccordingToChoices);
if ($.isFunction($.fn.iCheck)) {
$('#choices input').on('ifChanged', function (event) {
plotAccordingToChoices();
});
}
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && togdatasets[key]) {
data.push(togdatasets[key]);
}
});
if (data.length > 0) {
$.plot("#flot-toggle", data, {
yaxis: {
min: 0
},
xaxis: {
tickDecimals: 0
},
series: {
shadowSize: 0 // Drawing is faster without shadows
},
//colors: ["#1874BF", "#673AB7", "#E91E63", "#FFC107", "#797979", "#bd21b0" , "#22c62f"],
grid: {
tickColor: "#f5f5f5",
borderWidth: 1,
borderColor: "#eaeaea"
},
});
}
}
plotAccordingToChoices();
}