如何在Highcharts多列图表Y轴显示X轴标签（如销售累计、销售OKR）？

要在Y轴位置显示“年初至今销售额（year to date sales）”和“销售OKR（OKR for sales）”这两个标签，核心思路是为每个数据系列配置独立的Y轴，并将Y轴标题设置为对应的名称。以下是具体实现步骤和修改后的代码：

关键配置调整 #

• 定义多Y轴：在yAxis配置项中添加两个轴实例，分别设置标题、位置和样式，避免标题重叠。
• 绑定系列到对应Y轴：每个数据系列通过yAxis属性指定对应的轴索引。
• 调整图表边距：确保Y轴标题有足够的显示空间。

修改后的完整代码 #

Highcharts.chart('container', {
    chart: {
        type: 'column',
        marginLeft: 120 // 增大左侧边距，容纳Y轴标题
    },
    title: {
        text: 'Sales Performance'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        crosshair: true
    },
    yAxis: [
        {
            title: {
                text: '年初至今销售额',
                align: 'high',
                rotation: 0,
                y: -10,
                x: -10
            },
            labels: {
                align: 'left',
                x: 0,
                y: 5
            },
            offset: 0,
            lineWidth: 1
        },
        {
            title: {
                text: '销售OKR',
                align: 'high',
                rotation: 0,
                y: -10,
                x: -10
            },
            labels: {
                align: 'left',
                x: 0,
                y: 5
            },
            offset: 60, // 偏移第二个Y轴，避免标题重叠
            lineWidth: 1,
            opposite: false // 保持在左侧显示
        }
    ],
    tooltip: {
        shared: true
    },
    series: [
        {
            name: 'YTD Sales',
            data: [49.9, 71.5, 106.4, 129.2, 144.0],
            yAxis: 0 // 绑定到第一个Y轴
        },
        {
            name: 'Sales OKR',
            data: [83.6, 78.8, 98.5, 93.4, 106.0],
            yAxis: 1 // 绑定到第二个Y轴
        }
    ]
});

配置说明 #

• yAxis数组中的两个轴分别对应目标标签，通过offset属性调整横向位置，避免标题重叠。
• Y轴标题设置rotation: 0让文字水平显示，配合align和x/y属性调整标题位置，使其贴近Y轴。
• 每个系列通过yAxis属性指定关联的轴，确保数据与标签一一对应。

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