Скрытие _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, но не могу понять, какие дочерние элементы соответствуют серии на диаграмме.

Спасибо.

Ответ 1

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

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

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

//do work

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

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

Ответ 2

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

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

http://api.highcharts.com/highcharts#Series.setVisible