谁能帮我了解一下这里的问题。一切看起来都很完美。
http:/jsfiddle.netprakash4mailnt86gj7z1
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
准确的答案是 行数: 500 (从UI角度看--高度。各点之间的Y轴差)和 colsize: 86400000 每一天,每点之间的x轴差)。缺少了这一点,就会导致盒子不显示。
据我了解,你想实现的东西是呈现在这里。http:/jsfiddle.netBlackLabelo6ywag42。
请注意这个来自Highcharts演示基地的演示中的数据结构是怎样的。https:/jsfiddle.netBlackLabeluofntb4y - 如果你想保持点的正方形,'y'的值必须一个一个的增长,就像这里。http:/jsfiddle.netBlackLabelo7bgq1pu
而要显示你真正的y规模,你可以使用分类功能。
yAxis: {
categories: ['18000', '18500', '19000']
},
API。https:/api.highcharts.comhighchartsyAxis.categories.
EDIT:
@prakash建议的另一个解决方案是使用 系列.行大小 财产和 系列.colsize 以适应方块。
API。https:/api.highcharts.comhighchartsseries.heatmap.rowsize。
API。https:/api.highcharts.comhighchartsseries.highchartsseries.heatmap.colsize。