由于它是在标题中写的,我尝试使用highcharts渲染热图图表。 我添加了一个click事件来更改单击点时的颜色。
但并非所有坐标都有数据。结果,这些点无法正确渲染。
如果我尝试从数据标签中单击左上方的矩形,则在错误的点下方被着色。 这是一个错误吗? 我必须在我的数据中提供整套坐标吗? 这是我的问题的一个小例子 error example
(这不适用于您没有数据中整套坐标的所有情况。例如,这有效working example)
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
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 '<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>';
}
},
plotOptions: {
heatmap: {
cursor: 'pointer',
allowPointSelect: true,
events: {
click: function (event) {
if (event.point.shapeArgs && event.point.shapeArgs.fill == 'red') {
event.point.update({
color: null,
})
} else {
event.point.update({
color: 'red',
})
}
}
},
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 4, 67], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});});