在Highcharts和jQuery中隐藏_groups_系列：如何获得可接受的性能？ [英] Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?

问题描述

我使用Highcharts来表示时间序列组。因此，从同一个人收集的数据点通过线连接，属于同一组的个人的数据点共享相同的颜色。 Highcharts图例显示了每个时间序列而不是组，并且我有超过一百个时间序列，因为以这种方式隐藏和显示数据是丑陋的和不切实际的。

取而代之我制作了按钮，并使用jQuery将它们与可在时间序列中搜索匹配颜色并切换每个匹配系列的可见性的函数相关联。

以下是一个示例一个小的数据集： http://jsfiddle.net/bokov/VYkmg/6/

以下是该示例中的系列隐藏功能：

  $（如果（$（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一个更具体的选择器吗？

我试着挖掘由Highcharts创建的< svg> 元素，但是我找不到哪个孩子元素对应于图表中的系列。

谢谢。

解决方案

这里的问题是Highcharts在每次系列更改后重新绘制图表。我检查了API，看看是否有一个可以传递的参数推迟，但看起来并不是这样。

相反，您可以停用重新绘制方法，直到你准备好了，像这样：

  var _redraw = chart.redraw; 
 chart.redraw = function（）{}; 
 
 //工作
 
 chart.redraw = _redraw; 
 chart.redraw（）; 
  

查看完整示例这里。对我而言，这样做的速度要快10倍。

I'm using Highcharts to represent groups of time series. So, data points collected from the same individual are connected by lines, and data points from individuals that belong to the same group share the same color. The Highcharts legend displays each individual time series instead of groups, and I have over a hundred time series, to it's ugly and impractical to hide and show data that way.

Instead I made buttons and used jQuery to associate them with functions that would search for matching colors among the time series and toggle the visibility of each matching series.

Here is an example with a small dataset: http://jsfiddle.net/bokov/VYkmg/6/

Here is the series-hiding function from that example:

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

The above works. The problem is, my real data can have over a hundred individual time series and it looks like checking the color of each series is really slow. So, can anybody suggest a more efficient way to solve this problem? Are there some built-in Highcharts methods that already do this? Or, can I give jQuery a more specific selector?

I tried digging into the <svg> element created by Highcharts but I can't figure out which child elements correspond to the series in the chart.

Thanks.

解决方案

The issue here is that Highcharts is redrawing the chart after every series change. I checked the API to see if there was a param you could pass to defer that, but that doesn't appear to be the case.

Instead, you can stub out the redraw method until you are ready, like so:

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

//do work

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

Check out the full example here. For me, it was about 10 times faster to do it this way.

这篇关于在Highcharts和jQuery中隐藏_groups_系列：如何获得可接受的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！