Highcharts热图图表标签渲染速度极慢

Question

我使用Highcharts生成一个包含大约10k网格单元的热图网格。热图在没有dataLabels的情况下在一秒内呈现。但是，如果我启用了我的项目所需的dataLabel，则相同的热图需要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秒



从分析器我可以说有两个优化的候选者。

1. 使用重叠标签进行渲染：10.4 s

   dataLabels: {
     enabled: true,
     allowOverlap: true
   }
   

2. 没有textOutline：8.56 s

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

另一个候选人是关于为数据标签设置zIndex，我无法看到如何优化它而不更改负责绘制数据标签的内部Highcharts方法。您可以包装drawDataLabels方法并删除部件以设置标签的zIndex。

1. 没有zIndex：1.62 s

   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']

1. 文字而不是标签：0.864 s

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