使用带有堆叠的柱形图,
如果系列中的最小值和最大值之间存在很大差异,则低值会重叠,是否有解决方法?
请参阅此小提琴中的 Jan 类别以进行复制 - 两个条形都有一个值,但图表中只有一个可见,将鼠标悬停在图例上显示它们重叠。仅当系列中的最大值比最小值大数倍时才会发生这种情况,设置条形的最小尺寸也没有帮助,它们仍然重叠。
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'
]
},
plotOptions: {
series: {
stacking: 'normal'
},
column: {
minPointLength: 3
}
},
series: [{
data: [
27, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
95.6, 5400.4
]
}, {
data: [
25, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5,
106.4, 129.2
]
}],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ' +
'({point.percentage:.1f}%)<br/>'
}
});
您可以简单地添加不同的最小尺寸
minPointLength
,这样它们就不会具有相同的尺寸。
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [
27,
71.5,
106.4,
129.2,
144.0,
176.0,
135.6,
148.5,
216.4,
194.1,
95.6,
5400.4
],
minPointLength: 30 // <<<
}, {
data: [
25,
176.0,
135.6,
148.5,
216.4,
194.1,
95.6,
54.4,
29.9,
71.5,
106.4,
129.2
],
minPointLength: 20 // <<<
}],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ' + '({point.percentage:.1f}%)<br/>'
}
});
#container {
height: 100vh;
max-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.1.2/highcharts.min.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>