Highcharts中使用tickPositions后如何固定X轴刻度间距

问题原因 #

你当前使用默认线性X轴时，Highcharts会根据刻度数值的实际跨度自动计算轴上间距，导致数值跨度差异大的刻度（比如0到0.5、5到20）在轴上显示宽度不一致。要实现固定等间距的X轴，需将X轴设置为类别轴（category type）。

修改方案 #

1. 调整X轴配置 #

将xAxis.type设为'category'，用categories替代tickPositions，把需要固定的刻度值作为类别列表：

xAxis: {
    title: {
        text: '(m)',
        style: {
            color: '#0a0a0a',
            fontWeight: 'bold',
            fontSize:'15px'
        }
    },
    type: 'category', // 设置为类别轴
    categories: ['0', '0.5', '1', '3', '5', '20', '50', '100', '200', '400', '800'], // 固定刻度作为类别
    lineColor: '#000000',
    gridLineColor: '#807f7f',
    labels: {
        style: {
            color : '#0a0a0a',
            fontWeight: 'bold',
            fontSize:'13px'
        },
    },
}

2. 适配数据格式 #

将数据的X值对应到categories的索引，或直接使用类别字符串（需与categories中的值完全匹配），示例数据调整如下：

// 方式1：用类别索引对应数据
var legendData = [
    [0, 5], [1, 6], [2, 7], [3, 13], [4, 22],
    [6, 5], [8, 6], [9, 7], [10, 22]
];

// 方式2：直接用类别字符串（更直观）
var legendData = [
    ['0', 5], ['0.5', 6], ['1', 7], ['3', 13], ['5', 22],
    ['100', 5], ['200', 6], ['400', 7], ['800', 22]
];

设置完成后，每个刻度在X轴上的间距会完全固定，不会随数值大小变化，实现你需要的固定显示效果。

内容的提问来源于stack exchange，提问作者최인영