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

slsn1g29 于 9个月前发布在 Highcharts

关注(0)|答案(1)|浏览(202)

当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; }}}

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

highcharts

来源：https://stackoverflow.com/questions/77579948/auto-rotation-is-not-working-for-x-axis-label-highchart

1条答案

按热度按时间

ngynwnxp1#

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

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,
        },
       }
      }
    }]
  }

});

字符串

Demo：https://jsfiddle.net/BlackLabel/sxng3q2y/

赞(0）回复(0）举报 9个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答