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/