Highcharts问题：绿色柱内的蓝色柱无法正常显示

要实现蓝色柱在绿色柱内部的效果，你需要调整柱子的位置、宽度和层级，以下是修改后的代码和关键调整点：

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
            pointPadding: 0.2,
            pointPlacement: 0, // 对齐到x轴刻度中心
            pointWidth: 10, // 更窄的宽度
            zIndex: 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
            pointPadding: 0.2,
            pointPlacement: 0, // 对齐到x轴刻度中心
            pointWidth: 20, // 更宽的宽度
            zIndex: 1, // 更低层级作为背景
            yAxis: 1
        }
    ]
});

关键调整说明： #

1. pointPlacement: 0：将两个系列的柱子都对齐到x轴刻度的中心位置，确保它们重叠在一起。
2. pointWidth差异化设置：让绿色柱（Animals）的宽度大于蓝色柱（Plants），形成外层包裹内层的视觉效果。
3. zIndex层级控制：给蓝色柱设置更高的zIndex，确保它不会被绿色柱完全覆盖，能正常显示在绿色柱的内部区域。
4. 统一pointPadding：保持两个系列的pointPadding一致，让整体布局更协调。

这样调整后，蓝色柱就会显示在绿色柱的内部，符合你想要的效果。

内容的提问来源于stack exchange，提问作者user3218583