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

Question

我正在使用高图集来生成一个热图网格，其中包含大约10k的网格单元。热图在没有dataLabels的情况下呈现在秒以下。但是，如果我启用了dataLabels (这是我的项目所必需的)，则相同的热图需要10秒才能呈现。我尝试将useHTML设置为true，然后在30+秒内呈现。我不会在dataLabel呈现中做任何工作。有办法加快速度吗？

​

​

Answer 1

使用启用数据标签的热图中的10k单元格的示例是这里。

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.56s dataLabels：{ textOutline:真，allowOverlap:真，阴影:假，样式：{textOutline: null，颜色：‘黑色’}，

另一个选择是为数据标签设置zIndex，如果不更改负责绘制数据标签的内部高级图表方法，我就无法了解如何优化它。您可以包装drawDataLabels方法并删除用于设置标签的zIndex的部件。

1. 不使用zIndex: 1.62 s attr ={ //对齐:对齐，填充: options.backgroundColor，笔画: options.borderColor，‘笔画宽度’：options.borderWidth，r: options.borderRadius欧元0，旋转:旋转，填充: options.padding // zIndex: 1 /*注释这部分给出了几秒*/ }；

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

我在函数中只注释了一行，但如果不需要附加功能，可以删除它们--例如，如果不需要标签，则只能呈现文本。

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

1. 文本而不是标签: 0.864 s

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