Как я могу проверить и снять одно значение за раз в моем графике - PullRequest
0 голосов
/ 14 апреля 2020

Я строю линейный график и хочу, чтобы за один раз на моем графике отображалась только одна линия. Когда я отмечаю флажок в моей легенде, я хочу, чтобы он был снят по умолчанию и наоборот. В настоящее время я хочу иметь возможность проверять и снимать их, но я не знаю, как это сделать, чтобы это было только по одному за раз.

Вот как выглядит моя диаграмма прямо сейчас, поскольку вы вижу, что все они отмечены enter image description here

Я хочу, чтобы это было по одному за раз, как это: enter image description here, поэтому, когда человек ставит новый флажок, Тот, кто был отмечен

Это мой сценарий:

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

}

1 Ответ

0 голосов
/ 15 апреля 2020

Я наконец нашел решение и решил go там с переключателями, вот мой код:

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

Это представление: enter image description here

...