Highcharts自定义X轴标签序列：先正后负递增并设固定间隔

希望Highcharts的X轴先按递增顺序显示所有正值，再按递增顺序显示负值区间（例如先显示0、10、20…，再显示-90、-80、-70…）。目前用categories实现后，X轴显示的是精确浮点数，需要改成固定间隔的刻度。

不要用categories定义X轴（它会强制显示所有数据点的精确值），改用线性轴配置，通过tickPositioner自定义刻度位置，同时调整数据排序逻辑，让图表按需求顺序绘制。

实现步骤 #

1. 整理数据顺序：分离正负值，正值按Y值（温度）递增排序，负值同样按Y值递增排序（确保负值区间从-10到-90依次显示），再合并为先正值后负值的数据集。
2. 自定义X轴刻度：通过tickPositioner生成固定间隔的正负刻度，先排列正值刻度，再排列负值刻度。
3. 匹配轴范围：设置X轴的min和max，确保所有自定义刻度都在轴的显示范围内。

修改后代码 #

var data = [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]];

// 分离正负值并排序：正值按温度递增，负值按温度递增
var posData = data.filter(item => item[1] >= 0).sort((a, b) => a[1] - b[1]);
var negData = data.filter(item => item[1] < 0).sort((a, b) => a[1] - b[1]);
// 合并为需求顺序的数据集
var sortedData = [...posData, ...negData];

// 生成固定间隔的刻度：正值0/10/20，负值-10/-20...-90
function generateCustomTicks() {
  const posTicks = [];
  for (let i = 0; i <= 20; i += 10) posTicks.push(i);
  
  const negTicks = [];
  for (let i = -10; i >= -90; i -= 10) negTicks.push(i);
  
  return [...posTicks, ...negTicks];
}

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    xAxis: {
        reversed: false,
        title: {
            enabled: true,
            text: 'Temperature'
        },
        labels: {
            format: '{value}°'
        },
        // 自定义刻度位置
        tickPositioner: function() {
            return generateCustomTicks();
        },
        // 确保轴范围覆盖所有刻度
        min: -90,
        max: 20
    },
    yAxis: {
        title: {
            text: 'Altitude'
        },
        labels: {
            format: '{value} km'
        },
        lineWidth: 2
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x}°C: {point.y} km'
    },
    plotOptions: {
        spline: {
            marker: {
                enable: false
            }
        }
    },
    series: [{
        name: 'Altitude vs Temperature',
        data: sortedData
    }]
});

关键说明 #

• 移除categories改用线性轴，通过tickPositioner完全控制刻度的数值和显示顺序，解决了精确浮点数显示的问题。
• 数据排序后，图表会先绘制正值区间的点，再绘制负值区间的点，符合需求的展示逻辑。
• 修正了原代码中X/Y轴标题与数据的对应混淆，让图表语义更准确。

内容的提问来源于stack exchange，提问作者Abhay Kaushik