如何在Highcharts中自定义指定序列的Y轴刻度标签

安全阿岳

2026-6-25

Highcharts柱状图Y轴自定义刻度解决方案

要实现Y轴显示0%、15%、30%、45%、60%、75%、100%的需求，直接指定刻度位置而非依赖tickInterval即可解决问题，以下是两种可行方案：

方案1：使用`tickPositions`配合标签格式化

通过tickPositions强制定义Y轴要显示的刻度数值，再用格式化器转成百分比格式，同时锁定轴的范围避免自动扩展：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    yAxis: {
        // 精确指定要显示的刻度数值
        tickPositions: [0, 15, 30, 45, 60, 75, 100],
        // 将刻度值格式化为百分比
        labels: {
            formatter: function() {
                return `${this.value}%`;
            }
        },
        // 锁定Y轴范围，防止自动生成额外刻度
        min: 0,
        max: 100
    },
    series: [{
        data: [25, 50, 75, 95] // 替换为你的任务完成百分比数据
    }]
});

方案2：使用`ticks`数组自定义每个刻度

如果需要对个别刻度做特殊样式或文本调整，可以直接定义ticks数组，每个元素包含刻度值和对应标签：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    yAxis: {
        min: 0,
        max: 100,
        ticks: [
            { value: 0, label: { text: '0%' } },
            { value: 15, label: { text: '15%' } },
            { value: 30, label: { text: '30%' } },
            { value: 45, label: { text: '45%' } },
            { value: 60, label: { text: '60%' } },
            { value: 75, label: { text: '75%' } },
            { value: 100, label: { text: '100%' } }
        ]
    },
    series: [{
        data: [25, 50, 75, 95]
    }]
});