Highchart 中的线条着色需要很长时间

Question

我有一个约 150 行的 Highcharts line chart。我在从蓝色到绿色到黄色到红色的渐变上为每一个着色，方法是在每一行中盘旋并调用一个小的 javascript 函数来计算它的值。

然而，计算这些总是需要相当长的时间——而且由于时间很短，它确实需要很长时间。不知道为什么它变慢得如此之快，因为我没有触及代码，我会说。

循环遍历的代码：

    function(chart)
    { 
        // number of line in graph; for the last year to highlight, this is important
        var chart = this;
        var n = chart.series.length; 


        // color the lines
        for(i = 0; i < n; i++)
        {
            var value=i/n;
            chart.series[i].update({color: getColor(value)});
        }


        chart.series[(n-1)].update({lineWidth: 4});
        chart.series[(n-1)].update({marker: {enabled: true}});
        chart.series[(n-1)].update({marker: {fillColor: '#000000'}})            
    });

并检索正确的颜色：

    function getColor(value){
        //value from 0 to 1
        var hue=((1-value)*240).toString(10);
        return ["hsl(",hue,",100%,40%)"].join("");
    }

知道如何改进这一点，因为现在图表加载大约需要 1 分钟左右...真的很慢。

Answer 1

也许等到你改变了所有的系列后再重新绘制图表？您可能想尝试 this update 选项：

...
        // color the lines
        for(i = 0; i < n; i++)
        {
            var value=i/n;
            chart.series[i].update({color: getColor(value)}, false);
        }
        chart.redraw();
...

Highchart 中的线条着色需要很长时间

Colouring of lines in Highchart takes ages

javascript

linechart

colors

highcharts