Блог

Главная - Вопросы по программированию - Обновить весь ряд данных для графика

Обновить весь ряд данных для графика

#highcharts

#highcharts

Вопрос:

Что я хочу сделать: у меня есть базовая линейная диаграмма, которая изначально загружается массивом данных (series: […]), который создает мне, скажем, x строк. Я также выставлю x флажков над диаграммой. При нажатии на один из флажков соответствующая строка должна исчезнуть или появиться. Поэтому я прослушиваю событие щелчка, а затем хочу добавить или удалить строку.

Проблема: я не могу понять, как заменить весь ряд на новый. Я нашел метод setData(), но он работает только с элементом массива данных. Я также нашел методы addSeries(), которые добавят элемент. И удалить (), который удалит определенный элемент. Проблема в том, что я не знаю, какой элемент какой. Я хотел бы скрыть строку или показать их, но постоянно иметь полные строки x в ряду данных. Я думаю.

Я также нашел метод update(), который позволит мне передать новый объект конфигурации на диаграмму, но он не работает, если я передам опцию ‘series: newData (array)’.

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

Надеюсь, это понятно, и кто-нибудь может указать, чего мне не хватает! Спасибо!

Комментарии:

1. Если ваше требование заключается в том, чтобы скрыть и отобразить одну строку по щелчку, это предоставляется highcharts из коробки. Вы должны legend включать и отключать линии на диаграмме. api.highcharts.com/highcharts/legend.enabled . Решит ли это вашу цель?

2. привет, спасибо за ваш ответ! к сожалению, то, что вы указали, будет включать и отключать только легенду. не сам ряд. но я нашел решение 🙂

Ответ №1:

Я нашел решение. Я бы загрузил весь массив данных в начале и показал или скрыл определенные ряды для начального отображения с параметром visible: false.

При нажатии флажков мне нужно найти правильный ряд, а затем есть методы show() и hide () для управления этим видимым свойством во время выполнения.

 chart.series[myIndex].show();
chart.series[myIndex].hide();

Ответ №2:

Вы можете использовать setVisible метод для серии и привязать флажки к серии:

 var checkboxes = document.getElementById('checkboxes').children;

for (var i = 0; i < checkboxes.length; i  ) {
    (function(i) {
        checkboxes[i].addEventListener('change', function() {
            chart.series[i].setVisible(this.checked);
        });
    })(i);
}

Живая демонстрация: http://jsfiddle.net/BlackLabel/ur31g4j5 /

Ссылка на API: https://api.highcharts.com/class-reference/Highcharts .Серия#setVisible