Highcharts热图表标签渲染非常缓慢

Question

我正在使用Highcharts生成具有10k个网格单元格的热图网格。在没有dataLabels的情况下，heatmap呈现在第二个下面。但是，如果我启用了我的项目所需的dataLabels，则同一个热图需要10秒才能呈现。我尝试将useHTML设置为true，并在30秒内渲染。我没有在dataLabel渲染中做任何工作。有什么办法可以加快速度吗？

Answer 1

用10k细胞在启用数据标签的热图的示例是here。

Highcharts.chart('container', { 
    chart: { 
    type: 'heatmap' 
    }, 

    xAxis: { 
    min: 0, 
    max: 99 
    }, 

    series: [{ 
    data: data, 
    dataLabels: { 
     enabled: true 
    } 
    }] 
}); 

1. 无选择渲染时间：33.5小号

从探查，我可以说泰德有两个很好的候选人进行优化。

渲染具有重叠的标签：10.4小号

dataLabels: { 
    enabled: true, 
    allowOverlap: true 
} 

否textOutline：8.56小号

dataLabels: { 
    enabled: true, 
    allowOverlap: true, 
    shadow: false, 
    style: { 
    textOutline: null, 
    color: 'black' 
    } 
}, 

的其他候选是关于设置zIndex为数据标签，我看不到如何在不更改负责绘制数据标签的内部Highcharts方法的情况下对其进行优化。您可以包装drawDataLabels方法并删除用于设置标签的zIndex的零件。

没有zIndex的：1.62小号

attr = { 
    //align: align, 

    fill: options.backgroundColor, 
    stroke: options.borderColor, 
    'stroke-width': options.borderWidth, 

    r: options.borderRadius || 0, 
    rotation: rotation, 
    padding: options.padding 
    // zIndex: 1 /* commenting this part gives a few good seconds */ 
}; 

完整的例子：http://jsfiddle.net/dddqrb9f/1/

我评论只有一行中的函数，但是可以删除额外功能，如果你不需要他们 - 例如如果您不需要标签，则只能渲染文本。

if (!dataLabel) { 
     dataLabel = point.dataLabel = renderer['text'] 

文本，而不是标签：0.864小号

例如：http://jsfiddle.net/dddqrb9f/2/