如何让Highcharts中灰色柱状图从$0（中间）向下延伸

我在页面中使用了多轴Highcharts图表，需要将灰色的Outflow柱状图设置为从$0（中间位置）向下延伸。此前尝试将两个柱状图分别绑定yAxis 0和1，但未解决该问题。

图表效果如下：

原代码片段：

Highcharts.chart('cashFlowChart', {
    chart: {
        zoomType: 'xy',
        backgroundColor: null
    },
    credits: {
        enabled: false
    },
    title: false,
    subtitle: false,
    xAxis: [{
        categories: ['Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022'],
        crosshair: false
    }],
    yAxis: [{
        labels: {
            format: '${value}',
            style: {
                color: 'rgb(102, 102, 102)'
            }
        },
        title: false,

    }, {
        title: false,
        labels: {
            enabled: false
        },
        opposite: true
    }],
    tooltip: {
        shared: false
    },
    legend: {
        layout: 'horizontal',
        align: 'left',
        x: 0,
        verticalAlign: 'top',
        y: 0,
        floating: false,
        itemMarginBottom: 25,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'rgba(255,255,255,0.25)'
    },
    series: [{
        name: 'Inflow',
        type: 'column',
        yAxis: 0,
        color: '#23C770',
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 78850.00, 0.00, 0.00, 0.00, 80.00],
        tooltip: {
            valueSuffix: '$'
        }


    }, {
        name: 'Outflow',
        type: 'column',
        yAxis: 1,
        color: '#8AA2B2',
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 8553.00, 0.00, 0.00, 0.00, 36100.00],
        tooltip: {
            valueSuffix: '$'
        }
    }, {
        name: 'Net Change',
        type: 'spline',
        color: 'rgb(28, 37, 44)',
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 70297.00, 0.00, 0.00, 0.00, -36020.00],
        tooltip: {
            valueSuffix: '$'
        },
        marker: {
            radius: 5,
            lineColor: 'rgb(28, 37, 44)',
            lineWidth: 1,
            fillColor: '#ffffff'
        }
    }]
});

不需要使用双y轴，通过以下修改即可实现需求：

1. 将Outflow系列的所有数据改为负数（柱状图数值为负时会自动向下延伸）
2. 删除多余的第二个y轴配置，只保留一个y轴
3. 调整y轴的标签和tooltip格式化函数，让负数显示为直观的正数支出格式

修改后的完整代码：

Highcharts.chart('cashFlowChart', {
    chart: {
        zoomType: 'xy',
        backgroundColor: null
    },
    credits: {
        enabled: false
    },
    title: false,
    subtitle: false,
    xAxis: [{
        categories: ['Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021', 'Jan 2022', 'Feb 2022', 'Mar 2022', 'Apr 2022', 'May 2022', 'Jun 2022', 'Jul 2022'],
        crosshair: false
    }],
    yAxis: [{
        labels: {
            // 处理负数显示，让支出数值显示为正数格式
            formatter: function() {
                return '$' + Math.abs(this.value);
            },
            style: {
                color: 'rgb(102, 102, 102)'
            }
        },
        title: false,
        // 可选：强制y轴包含0，确保0在中间位置
        minPadding: 0.1,
        maxPadding: 0.1
    }],
    tooltip: {
        shared: false
    },
    legend: {
        layout: 'horizontal',
        align: 'left',
        x: 0,
        verticalAlign: 'top',
        y: 0,
        floating: false,
        itemMarginBottom: 25,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'rgba(255,255,255,0.25)'
    },
    series: [{
        name: 'Inflow',
        type: 'column',
        color: '#23C770',
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 78850.00, 0.00, 0.00, 0.00, 80.00],
        tooltip: {
            valueSuffix: '$'
        }
    }, {
        name: 'Outflow',
        type: 'column',
        color: '#8AA2B2',
        // 将数据改为负数，实现向下延伸
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, -8553.00, 0.00, 0.00, 0.00, -36100.00],
        tooltip: {
            // tooltip中显示正数
            formatter: function() {
                return '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>$' + Math.abs(this.y) + '</b><br/>';
            }
        }
    }, {
        name: 'Net Change',
        type: 'spline',
        color: 'rgb(28, 37, 44)',
        data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 70297.00, 0.00, 0.00, 0.00, -36020.00],
        tooltip: {
            valueSuffix: '$'
        },
        marker: {
            radius: 5,
            lineColor: 'rgb(28, 37, 44)',
            lineWidth: 1,
            fillColor: '#ffffff'
        }
    }]
});

说明 #

• 柱状图的方向由数据正负决定：正数向上，负数向下，因此将Outflow数据改为负数即可实现向下延伸的效果
• 调整y轴的标签和tooltip格式化函数，避免显示负号，让支出数值显示为直观的正数格式
• 移除双y轴配置，简化图表结构，同时保证0刻度处于图表中间位置

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