Highcharts 多Y轴折线图入门讲解：让不同单位的数据在一张图中正确表达

原创已于 2026-09-14 08:35:16 修改 · 141 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-09-14 08:33:03 首次发布

文章定位

目标读者： Highcharts 初学者、前端开发者、数据分析人员。
学习目标：

理解为什么需要多个 Y 轴；
掌握 Highcharts 折线图基础配置；
学会配置两个 Y 轴；
理解 yAxis 与 series.yAxis 的绑定关系；
避免双轴图最常见的误读问题。

重点内容：

多 Y 轴的使用场景；
单轴图与双轴图的差异；
yAxis 数组配置；
series.yAxis 绑定；
左右轴布局；
单位、颜色和 Tooltip 的基本设计。

发表于2026年9月

在数据可视化中，我们经常需要同时观察多个指标。

例如：

销售额，单位是万元；
订单量，单位是件；
转化率，单位是百分比；
客单价，单位是元。

这些指标通常共享相同的时间维度，因此很适合放在一张趋势图中。但它们的单位和数量级不同，如果全部使用同一个 Y 轴，较小的指标可能会被压缩，无法清晰展示。

这正是多 Y 轴折线图的应用场景。

一、先从单 Y 轴折线图开始

Highcharts 的基础折线图结构非常简单：

Highcharts.chart('container', {
    title: {
        text: '月度销售额趋势'
    },

    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月']
    },

    yAxis: {
        title: {
            text: '销售额（万元）'
        }
    },

    series: [{
        name: '销售额',
        data: [120, 135, 128, 160, 175, 190]
    }]
});

其中：

xAxis.categories 定义横轴分类；
yAxis 定义纵轴；
series 定义折线数据；
series.name 会显示在图例和 Tooltip 中。

二、为什么销售额和订单量不适合共用一个 Y 轴

假设我们同时展示：

销售额：120、135、160、190
订单量：32、40、51、66

虽然它们都可以绘制在同一个坐标系中，但两者单位不同：

销售额的单位是万元；
订单量的单位是件。

如果指标数量级差异更大，例如销售额为数万，而订单量只有几十，那么订单量折线会贴近 X 轴，用户无法判断其变化趋势。

因此，我们可以为不同指标配置独立的 Y 轴。

三、配置两个 Y 轴

在 Highcharts 中，单个 Y 轴可以写成对象：

yAxis: {
    title: {
        text: '销售额'
    }
}

多个 Y 轴则需要写成数组：

yAxis: [{
    title: {
        text: '销售额（万元）'
    }
}, {
    title: {
        text: '订单量（件）'
    },
    opposite: true
}]

这里：

第一个 Y 轴索引为 0；
第二个 Y 轴索引为 1；
opposite: true 将第二个 Y 轴放置在右侧。

四、通过 `series.yAxis` 绑定坐标轴

每个系列都可以通过 series.yAxis 指定所使用的 Y 轴：

Highcharts.chart('container', {
    title: {
        text: '销售额与订单量'
    },

    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月']
    },

    yAxis: [{
        title: {
            text: '销售额（万元）'
        }
    }, {
        title: {
            text: '订单量（件）'
        },
        opposite: true
    }],

    series: [{
        name: '销售额',
        data: [120, 135, 128, 160, 175, 190],
        yAxis: 0
    }, {
        name: '订单量',
        data: [32, 40, 38, 51, 58, 66],
        yAxis: 1
    }]
});

绑定关系如下：

系列	使用的 Y 轴
销售额	`yAxis: 0`
订单量	`yAxis: 1`

如果没有指定 series.yAxis，默认使用第一个 Y 轴。

五、让颜色帮助用户建立对应关系

多轴图中，颜色是一种重要的辅助编码方式。

可以让：

销售额折线使用蓝色；
左侧 Y 轴使用蓝色；
订单量折线使用橙色；
右侧 Y 轴使用橙色。

Highcharts.chart('container', {
    title: {
        text: '销售额与订单量'
    },

    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月']
    },

    yAxis: [{
        title: {
            text: '销售额（万元）',
            style: {
                color: '#2f7ed8'
            }
        },
        labels: {
            style: {
                color: '#2f7ed8'
            },
            format: '{value} 万元'
        },
        lineColor: '#2f7ed8',
        lineWidth: 2
    }, {
        title: {
            text: '订单量（件）',
            style: {
                color: '#ed7d31'
            }
        },
        labels: {
            style: {
                color: '#ed7d31'
            },
            format: '{value} 件'
        },
        lineColor: '#ed7d31',
        lineWidth: 2,
        opposite: true
    }],

    series: [{
        name: '销售额',
        data: [120, 135, 128, 160, 175, 190],
        yAxis: 0,
        color: '#2f7ed8'
    }, {
        name: '订单量',
        data: [32, 40, 38, 51, 58, 66],
        yAxis: 1,
        color: '#ed7d31'
    }]
});

颜色可以帮助用户快速识别系列与轴的关系，但不能依赖颜色传达全部信息。坐标轴标题、图例和单位仍然必不可少。

六、共享 Tooltip 查看同一时间点的数据

如果用户希望在同一时间点同时查看多个指标，可以设置：

tooltip: {
    shared: true
}

tooltip: {
    shared: true,
    valueDecimals: 2
}

共享 Tooltip 能够回答：

六月份的销售额是多少？订单量是多少？

对于不同单位的数据，建议在 Tooltip 中显示单位，避免用户误读。

七、什么时候适合使用多 Y 轴

多 Y 轴适合以下场景：

多个指标具有相同的时间或分类维度；
指标之间需要进行趋势层面的观察；
指标单位不同，但仍然需要紧凑展示；
每个指标都能清晰标注单位和对应的坐标轴。

不建议仅仅为了节省空间，把没有关联的指标放在同一张图中。

八、总结

Highcharts 多 Y 轴的核心配置可以概括为：

yAxis: [
    {
        title: {
            text: '左侧指标'
        }
    },
    {
        title: {
            text: '右侧指标'
        },
        opposite: true
    }
],

series: [
    {
        name: '指标一',
        yAxis: 0,
        data: []
    },
    {
        name: '指标二',
        yAxis: 1,
        data: []
    }
]