如何在我的图表中同时检查和取消选择一个值

Question

我正在构建折线图，并且我一次只能在图表中显示一条线。当我在图例中选中一个复选框时，我希望默认情况下不选中它，反之亦然。目前，我希望能够检查和取消选中它们，但是我不知道如何做，因此一次只能进行一次。

这是我的图表现在的样子，如您所见，它们都已选中

我希望每次都像这样：因此当该人勾选新复选框时，被选中的人

这是我的脚本：

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();

}

Answer 1

我终于找到了解决方案，并决定通过单选按钮转到此处，这是我的代码：

    var choiceContainer = $("#choices");
    var index = 0;
    $.each(togdatasets, function (key, val) {
        if (index == 0) {
            choiceContainer.append("<br/><input class='iCheck' type='radio' name='chartline' checked='checked' id='id" + key + "' value='" + key + "'></input>" +
                "<label class='form-label' style=\"color:" + val.colors + "\" for='id" + key + "'>" + val.label + "</label>");
        } else {
            choiceContainer.append("<br/><input class='iCheck' type='radio' name='chartline' id='id" + key + "' value='" + key + "'></input>" +
                "<label class='form-label' style=\"color:" + val.colors + "\" for='id" + key + "'>" + val.label + "</label>");
        }

        index++;
    });

并且如果您在问题中很好地看待我的代码，那么我不会评论第二行：

   //if icheck is not applied, then use this code below
        choiceContainer.find("input").click(plotAccordingToChoices); //this one 

        if ($.isFunction($.fn.iCheck)) {
            $('#choices input').on('ifChanged', function (event) {
                plotAccordingToChoices();
            });
        }

这是视图：