Highcharts X-range系列非连续Y分类多余数值标签移除问题咨询

直接通过Y轴的tickPositions和labels.formatter两个原生配置即可实现，无需对原始Y值做映射转换，具体实现如下：

实现逻辑 #

• 先整理所有用到的Y值（去重后排序），通过tickPositions配置指定Y轴仅渲染这些位置的刻度，自动跳过0到首个有效Y值之间的区间、以及有效Y值之间的空缺值
• 用键值对映射存储Y值对应的分类标签，通过labels.formatter返回对应标签即可，无需维护稀疏数组
• 可选配置startOnTick和endOnTick为true，让Y轴范围完全贴合实际使用的刻度，没有多余留白

完整示例代码 #

// 原始业务数据对应的Y值和分类映射
const validYValues = [768, 769, 773];
const yLabelMap = {
  768: 'one',
  769: 'two',
  773: 'three'
};

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Example'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        // 仅渲染指定位置的刻度
        tickPositions: validYValues,
        labels: {
            formatter: function() {
                return yLabelMap[this.value] ?? '';
            }
        },
        startOnTick: true,
        endOnTick: true
    },
    series: [{
        name: 'dataset 1',
        borderColor: 'gray',
        pointWidth: 20,
        // 原始数据的Y值完全不需要修改
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 768,
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 773
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 769
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 773
        }],
        dataLabels: {
            enabled: true
        }
    }]
});

适配说明 #

你当前使用的Highcharts 9.0.1、highcharts-angular 2.10.0版本完全支持上述配置，不需要做额外适配，也不会影响你已实现的多系列按系列配色的逻辑。如果你的数据是动态生成的，只需要提前从所有系列的data中提取唯一的Y值、整理为分类映射，再赋值给对应配置项即可实现自动化处理。

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