3D Highcharts 堆叠条形图，折线图不显示在前面

Question

我正在尝试实现一个图表，其中我们将有一个堆积条形图。堆栈代表“已使用”、“未使用”、“离线”，线条代表平均值。 x 轴代表一天中的 0-23 小时。以下是配置示例：

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 10,
            beta: 25,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Utilization Overview (3D)'
    },
    xAxis: {
        categories: Array.from({ length: 24 }, (_, i) => i.toString()), // Hours from 0 to 23
        title: {
            text: 'Hour of the Day'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Utilization'
        }
    },
    tooltip: {
        shared: false,
        formatter: function() {
            if (this.series.type === 'line') {
                return `<b>Average</b>: ${this.y}`;
            } else {
                return `<b>${this.series.name}</b>: ${this.y}`;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            depth: 25 // Set depth for columns
        },
        line: {
            marker: {
                enabled: false
            },
            zIndex: 10 
        }
    },
    series: [{
        name: 'Utilized',
        data: [5, 3, 4, 7, 2, 6, 8, 7, 5, 4, 6, 8, 9, 10, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Not Utilized',
        data: [2, 2, 3, 2, 1, 1, 2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Offline',
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        stack: 'utilization',
        zIndex: 1 
    }, {
        name: 'Average',
        type: 'line',
        data: [4, 2.67, 2.67, 3.33, 1.33, 2.67, 3.67, 3.00, 2.67, 2.33, 2.67, 3.00, 3.67, 4.00, 4.67, 4.00, 4.00, 3.00, 2.67, 2.00, 2.00, 2.00, 2.00, 1.67],
        zIndex: 10
    }]
});

我希望这条线位于酒吧前面。它在未启用 3d 时有效。但启用 3d 后就不起作用了

Answer 1

只需将线系列的 zIndex 增加到更高的值，例如 1000。

演示：https://jsfiddle.net/BlackLabel/6qybs0Lt/

API参考：https://api.highcharts.com/highcharts/series.line.zIndex

{
    name: 'Average',
    type: 'line',
    data: [4, 2.67, 2.67, 3.33, 1.33, 2.67, 3.67, 3.00, 2.67, 2.33, 2.67, 3.00, 3.67, 4.00, 4.67, 4.00, 4.00, 3.00, 2.67, 2.00, 2.00, 2.00, 2.00, 1.67],
    zIndex: 1000
}