Highcharts 热图不适用于大范围的数据值(最小值:0,最大值:5,000,000)
Highcharts heat map does not work with a wide range of data values (min: 0, max: 5,000,000)
我尝试使用 Highcharts 绘制热图 (50 x 100)。我注意到当我的数据值范围很广(从 0 到 5,000,000)时,图表显示不正确。但是,如果我将数据值更改为更小的范围(例如从 0 到 1),图表似乎没问题。
$('#heatmap').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
zoomType: 'xy'
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
title: {
text: 'Sample title yo'
},
xAxis: {
categories: xCategories,
title: null
},
yAxis: {
categories: yCategories,
title: null
},
colorAxis: {
min: min,
max: maxv,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Lorem ipsum',
borderWidth: 1,
data: data,
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
这是我的 fiddle:http://jsfiddle.net/bpp8ahyc/4/
我可以做些什么来显示大值吗?
您需要增加 turboThreshold 的值或设置为无限制(增加 0)。
plotOptions: {
series: {
turboThreshold:0
}
}
我尝试使用 Highcharts 绘制热图 (50 x 100)。我注意到当我的数据值范围很广(从 0 到 5,000,000)时,图表显示不正确。但是,如果我将数据值更改为更小的范围(例如从 0 到 1),图表似乎没问题。
$('#heatmap').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
zoomType: 'xy'
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
title: {
text: 'Sample title yo'
},
xAxis: {
categories: xCategories,
title: null
},
yAxis: {
categories: yCategories,
title: null
},
colorAxis: {
min: min,
max: maxv,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Lorem ipsum',
borderWidth: 1,
data: data,
dataLabels: {
enabled: false,
color: 'black',
style: {
textShadow: 'none',
HcTextStroke: null
}
}
}]
});
这是我的 fiddle:http://jsfiddle.net/bpp8ahyc/4/
我可以做些什么来显示大值吗?
您需要增加 turboThreshold 的值或设置为无限制(增加 0)。
plotOptions: {
series: {
turboThreshold:0
}
}