Переключать определенные высокие графики при установке / снятии флажков

Question

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

Answer 1

Чтобы реализовать ожидаемую функциональность, необходимо установить флажок Series.showInLegend с помощью функции Series.update() для каждого события onchange на флажке, а также вызвать функцию setVisible() этой серии, чтобы переключить ее видимость на графике.,Вот пример кода того, как этого добиться:

Сначала вам нужно определить флажки, похожие на:

<input id="series1" type="checkbox" checked>Installation<br/>
<input id="series2" type="checkbox" checked>Manufacturing<br/>
<input id="series3"type="checkbox" checked>Sales and Distribution<br/>

Затем itter на каждом из этих флажков и добавить onchangeфункция события к нему.Внутри этой функции вам нужно обновить соответствующее значение серии showInLegend, как я уже говорил выше.Вы должны быть в состоянии сделать это, проверив наличие legendItem в объекте серии.Посмотрите на код ниже:

var checkboxes = ['series1', 'series2', 'series3']

checkboxes.forEach((elem, i) => {
    var checkbox = document.getElementById(elem)
    checkbox.onchange = function() {

        chart.series[i].update({
            showInLegend: chart.series[i].legendItem ? false : true
        })
        chart.series[i].setVisible()

    }
})

Живой пример: https://jsfiddle.net/uuwu48cm/