我在我的应用中使用Heat Map
Highcharts
库,我开始面对一个奇怪的场景。地图不显示某些行数据,请看下面的屏幕截图:
当我Inspect Element
一个单元格时,我会在列中看到数据。我注意到所有行单元格的不透明度都设置为0.在chrome中将其更改为1会显示该项目。
我的JS代码如下:
$highchart1.highcharts({
exporting: false,
credits: false,
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 120
},
title: {
align: 'left',
text: 'Some chart title',
style: { color: 'red' }
},
xAxis: {
categories: pillarOrClusters,
labels: {
style: { color: '#000' }
}
},
yAxis: {
categories: locations,
title: summary.locationType,
labels: {
style: { color: '#000' }
}
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> has <br><b>' +
this.point.value + '</b> items in <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Pillars per' + summary.locationType, // Loaded from Service
borderWidth: 1,
data: data,
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
为什么地图会为整个行元素将不透明度设置为0?
答案 0 :(得分:0)
由于图表的高度不足,此问题仅在Chrome
中提出,有时在IE
中提出。我按照yAxis
上的项目计算图表高度,如下所示:
//locations is an array of strings to be shown on yAxis
var chartHieght = locations.length * 35;
if (chartHieght < 350) chartHieght = 350;
然后将其设置如下:
chart: {
type: 'heatmap',
marginTop: 40,
height: chartHieght,
marginBottom: 130,
backgroundColor: '#F0F0F0',
borderColor: '#E5E5E5',
borderWidth: 2,
borderRadius: 4,
events: {
load: function () {
//THIS WAS A DIRTY WORKAROUND I WAS USING TO MAKE IT RENDER PROPERLY
/* $(".highcharts-data-labels g").attr("opacity", 1); */
}
}
}
将高度计算设为locations.length * 30
开始在Chrome中呈现相同的问题。 locations.length * 25
也会导致IE
中的问题。
希望它有所帮助。