highcharts 热图项目不透明度变为 0
highcharts heatmap items opacity turns to 0
我在我的应用程序中使用 Highcharts
库的 Heat Map
,我开始面临一个奇怪的场景。地图没有显示一些行数据,请看下面的屏幕截图:
当我 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?
由于图表高度不足,此问题仅在 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
中的问题。
希望对大家有所帮助。
我在我的应用程序中使用 Highcharts
库的 Heat Map
,我开始面临一个奇怪的场景。地图没有显示一些行数据,请看下面的屏幕截图:
当我 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?
由于图表高度不足,此问题仅在 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
中的问题。
希望对大家有所帮助。