Question

$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [  .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' + 
this.series.xAxis.categories[this.point.x] + 
'<br>' + 
this.series.yAxis.categories[this.point.y] + 
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ ..........  ],

http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/

这是热图图表。该图表看起来不错，但应该有更多数据。但是，如果我添加任何其他数据，图表会中断。

请注意，大部分数据已被注释掉。这从以

开头的数据开始

[50,0,null],
[50,1,8380],
[50,2,37430],

（请注意，我删除了上面显示的代码中的轴标签和数据。）如果您更改注释标记开头的位置以便“50”数据被图表化，那么图表就会失败。

这只是太多的数据，还是有办法创建一个需要大约20 x 90个单元格的热图？

Answer 1

从Highcharts API中将turboThreshold设置为0：

当一个系列包含一个比这长的数据数组时，只允许一维数字数组或具有x和y值的二维数组。此外，仅测试第一个点，并假设其余的格式相同。这样可以长时间地节省昂贵的数据检查和索引。将其设置为0禁用。默认为1000。

http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold

示例：http://jsfiddle.net/0mvgmhLb/7/

 series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        turboThreshold: 0,
        ...

Answer 2

尝试加载Highcharts Boost 模块。

boost.js模块是一个允许快速加载数百的模块 Highcharts中的数千个数据点。

此模块不是仅依靠SVG来显示图形，而是执行以下操作来提高性能：

...在画布上绘制图形，然后将内容复制到 SVG内部的图像标记，使用数据URL。

Link to official blog post.

只需在highcharts.js（ lib / modules / boost.js ）之后加载模块。

Answer 3

这可以通过为colorAxis提供最小值和最大值来解决。 Highcharts在使用极大数据集计算最大值时存在问题。

HIghcharts热图超载太多数据？

3 个答案: