Скрытие _groups_ серий в Highcharts и jQuery: как получить приемлемую производительность?

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

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

Вот пример с небольшим набором данных: http://jsfiddle.net/bokov/VYkmg/6/

Вот функция скрытия серии из этого примера:

$("#button").click(function() {
    if ($(this).hasClass("hideseries")) {
        hs = true;
    } else {
        hs = false;
    }
    $(chart.series).each(function(idx, item) {
        if (item.color == 'green') {
            if (hs) {
                item.show();
            } else {
                item.hide();
            }
        }
    });
    $(this).toggleClass("hideseries");
});

Выше работает. Проблема в том, что мои реальные данные могут иметь более ста отдельных временных рядов, и похоже, что проверка цвета каждой серии действительно медленная. Итак, кто-нибудь может предложить более эффективный способ решения этой проблемы? Есть ли какие-то встроенные методы Highcharts, которые уже делают это? Или я могу дать jQuery более конкретный селектор?

Я пытался копаться в <svg> элемент создан Highcharts, но я не могу понять, какие дочерние элементы соответствуют серии на диаграмме.

Благодарю.

Источник

2 ответа

Решение

Проблема здесь в том, что Highcharts перерисовывает график после каждого изменения серии. Я проверил API, чтобы увидеть, есть ли параметр, который можно передать, чтобы отложить это, но это не так.

Вместо этого вы можете отключить метод перерисовки, пока не будете готовы, вот так:

var _redraw = chart.redraw;
chart.redraw = function(){};

//do work

chart.redraw = _redraw;
chart.redraw();

Проверьте полный пример здесь. Для меня это было примерно в 10 раз быстрее.

Источник

Вместо того, чтобы звонить show() или же hide() для каждой серии звоните setVisible(/* TRUE OR FALSE HERE */, false);, Этот второй параметр является redraw параметр, и вы можете избежать перерисовки (что медленно) для каждой серии.

Затем, после того как вы закончите менять видимость, позвоните chart.redraw() один раз

http://api.highcharts.com/highcharts

Источник
Другие вопросы по тегам