自动旋转不适用于 X 轴标签 [highchart]

Question

当 X 轴标签重叠时，高图中折线图的 X 轴标签不会自动旋转。

只有标签较长时才自动旋转，否则即使重叠也不会自动旋转。

我已经尝试过代码，你可以参考 - https://jsfiddle.net/Saurathi/ghzvad4c/40/

xAxis:{type: 'datetime', lineWidth: 1, lineColor: '#404040', tickWidth: 1, tickLength: 3, tickColor: '#404040', startOnTick: true,endOnTick: true, min: Date.UTC(2022, 4, 31), max: Date.UTC(2023, 10, 1),tickPositions: [Date.UTC(2022, 4, 31), Date.UTC(2022, 9, 31), Date.UTC(2023, 2, 31), Date.UTC(2023, 8, 30), Date.UTC(2023, 10, 1)],categories: [Date.UTC(2022, 4, 31), Date.UTC(2022, 9, 31), Date.UTC(2023, 2, 31), Date.UTC(2023, 8, 30), Date.UTC(2023, 10, 1)],labels: {useHTML: true, padding: 0, style: { color: '#000000', textOverflow: 'none'}, formatter: function (){var tickDate = new Date(this.value);var year = tickDate.getFullYear() % 100;if (year < 10) year = '0' + year;this.chart.LastTickDate = tickDate;return monthNamesAbv[tickDate.getMonth()] + ' ' + year; }}}

请提供一些建议/解决方案。

Answer 1

由于tickPositions覆盖了tickPixelInterval和tickInterval的默认行为，自动旋转选项可能无法按预期工作。在这种情况下，我建议使用响应式规则并定义标签旋转应应用到的图表宽度。

let data = [
  [Date.UTC(2023, 2, 31), 3.6],
  [Date.UTC(2023, 8, 30), 2.6],
  [Date.UTC(2023, 10, 31), 3.2]
];

$('#container').highcharts({
  xAxis: {
    type: 'datetime',
    tickPositions: [Date.UTC(2023, 2, 31), Date.UTC(2023, 8, 30), Date.UTC(2023, 10, 1)],
    labels: {
      enabled: true,
      format: '{value:%b %y}'
    }
  },

  series: [{
    data
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 390
      },
      chartOptions: {
       xAxis:{
        labels: {
           rotation: -45,
        },
       }
      }
    }]
  }

});

演示： https://jsfiddle.net/BlackLabel/sxng3q2y/