提问人：user3218583 提问时间：11/14/2023 更新时间：11/14/2023 访问量：21
Highcharts 问题：蓝色条在绿色条内不可见
Issue with Highcharts: Blue bars not visible within green bars
问：
嗨，Stack Overflow 社区，
我目前正在处理一个 Highcharts 条形图，我希望蓝色条形在绿色条形内可见，但蓝色条没有显示。
，但我没有得到想要的结果。
以下是相关代码片段： https://jsfiddle.net/anibha88/yk7jupd1/3/
Highcharts.chart('container', { chart: { type: 'column' }, title: { text: '' }, credits: { enabled: false }, xAxis: { categories: ['1-2024', '2-2024', '3-2024', '4-2024', '5-2024', '6-2024', '7-2024', '8-2024', '9-2024', '10-2024', '11-2024', '12-2024'], }, yAxis: [{ min: 0, title: { text: 'Hello' } }, { min: 0, title: { text: '' }, }], legend: { shadow: false }, tooltip: { shared: true }, plotOptions: { column: { grouping: false, shadow: false, borderWidth: 0 } }, series: [ { name: "Plants", data: [81, 81, 81, 81, 81, 81, 81, 81, 81, 81, 81, 81], color: Highcharts.getOptions().colors[0], // Blue color for demand data pointPadding: 0.4, pointPlacement: 0.2, yAxis: 1 }, { name: "Animals", data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300], color: Highcharts.getOptions().colors[2], // Green color for capacity data pointPadding: 0.3, pointPlacement: 0.2, yAxis: 1 }] });
先谢谢你，
我尝试调整 pointPadding 和 pointWidth 属性。
答：
1赞
James Hibbard
11/14/2023
#1
出现此问题的原因是您为两个系列提供了相同的 .由于绿色条具有较大的值并放置在蓝色条的顶部，因此它们最终会完全覆盖蓝色条。yAxis
要解决此问题，请将属性添加到“植物”系列中：zIndex
series: [ {
name: "Plants",
data: [81, 81, 81, 81, 81, 81, 81, 81, 81, 81, 81, 81],
color: Highcharts.getOptions().colors[0],
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1,
zIndex:99, // <---- Add this
},
评论