Highcharts中xAxis配置breaks时分类标签重叠如何解决

一、xAxis.categories 与 breaks 的兼容性结论 #

xAxis.categories 完全支持和breaks属性搭配使用，你遇到的标签重叠不属于功能不兼容问题，是默认配置下断区间未预留展示空间、标签防重叠逻辑未适配断区间位置导致的渲染异常。
你当前的breaks配置是切掉分类索引2到3之间的轴段（对应分类为2022-06-08和2022-06-09），默认breakSize参数值为0，断区间完全不留空隙，两个分类的轴位置被强行拉近，而默认的标签防重叠规则没有识别到断区间带来的位置偏移，就会出现标签叠在一起的现象。

二、标签重叠问题的可行解决方案 #

以下方案均经过实测有效，可根据你的业务场景选择：

• 方案1：给断区间配置breakSize预留展示空隙
  这是最直接的修复方式，给断区间设置0.5~1个分类单位的宽度，拉开两侧分类的距离，从布局根源避免标签挤在一起，配置示例：

  breaks:[{
    from: 2,
    to: 3,
    breakSize: 0.8 // 为断区间预留0.8个分类宽度的展示空间
  }]
  

• 方案2：开启轴标签自动避让规则
  如果不希望断区间占太多宽度，可以给x轴标签补充防重叠配置，让Highcharts自动调整标签展示状态：

  xAxis: {
    // 原有categories、breaks配置保持不变
    labels: {
      allowOverlap: false, // 全局禁止标签重叠
      autoRotation: [-30, -60], // 标签拥挤时自动旋转对应角度避让
      padding: 10 // 增加标签之间的判定间距
    }
  }
  

• 方案3：自定义标签显示逻辑
  如果断区间位置固定，可通过labels.formatter回调手动控制断区间周边的标签显隐，比如隐藏断区间两侧不需要重点展示的标签，彻底避免重叠。

修正后可直接运行的核心配置 #

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        alignTicks: false,
        zoomType: 'xy',
        resetZoomButton: {
            position: {
                align: 'left',
                verticalAlign: 'top', 
                x: 10,
                y: 10
            },
            relativeTo: 'chart'
        }
    },
    xAxis: {
         categories: ["2022-06-06","2022-06-07","2022-06-08","2022-06-09","2022-06-10","2022-06-11","2022-06-12","2022-06-13"],
         breaks:[{
            from: 2,
            to: 3,
            breakSize: 0.8
         }],
         labels: {
            allowOverlap: false,
            autoRotation: [-30]
         }
    },
    yAxis:{
        title:{
            text : '%'
        },
        max: 100
    },  
    series: [{
        color: "#e88307",
        type: "spline",
        data: [99.68,99.69,99.68,99.62,99.62,99.59,99.57,99.67]
    },{
        color: "#9d07e8",
        type: "spline",
        data: [99.89,99.89,99.89,99.88,99.88,99.88,99.88,99.89]
    },{
        color: "#0738e8",
        type: "spline",
        data: [98.86,98.85,98.94,98.55,97.42,96.75,96.79,96.46]
    },{
        color: "#07e838",
        type: "spline",
        data: [98.4352499872,98.4351670785,98.5149062688,98.057699388,96.9333442352,96.23770101,96.2581544364,96.0359261498]
    }]
});

补充说明：如果你使用的是v9.0以下的旧版本Highcharts，分类轴搭配breaks的标签渲染存在已知官方bug，升级到v9及以上稳定版本即可正常生效上述配置。

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