尝试通过拖动查看缩放部分时，Lvl 1 标签会变得混乱

Question

通过拖动在缩放中面临的问题不适用于分组类别。

尝试通过拖动查看缩放部分时，Lvl 1 标签会变得混乱

示例 - https://jsfiddle.net/5bjzgner/

代码-

Highcharts.chart('container', {
chart
: 
{zoomType: 'xy'},
  xAxis: {
    categories: [
    {
        "categories": data,
labels: {
            groupedOptions: [
              {
                style: {
                  //color: 'red', // set red font for labels in 1st-Level
                },
              },
              {
                align: 'right',
              },
            ],
            formatter: function () {
              const text =
                typeof this.value === 'object' ? this.value.name : this.value;
              const spiltText = text.split(' ');
              if (spiltText[2]) {
                const t2 = spiltText[0] + '-' + spiltText[2].substring(0, 1);
                const index = parseInt(t2.split('-')[0]) > 9 ? 4 : 4;
                const day = t2.substring(0, index).split('-').join('<br />');
               
                return '<span class="day">' + day + '</span>';
              }
              return text;
            },
          },

  },
  
  series: [{
    data: [4, 3, 5, 6, 64, 3, 6, 7, 4, 32, 8, 35, 1, 2, 3, 4, 2, 5, 8, 9, 8, 11, 12, 13,11,56,12,73,50]
  }]

});

有人可以建议任何解决方法吗？

谢谢！

Answer 1

导致缩放或更改图表宽度时标签位置不更新的问题是您的自定义标签格式化功能（

label.formatter()

）。你可以做得更简单：

Highcharts.chart('container', {
  ...
  xAxis: {
    labels: {
      formatter: function() {
        const text = this.value;

        if (typeof text === 'string') return `${text.substring(0, 2)}<br/>${text.substring(8, 9)}`;
        return text;
      }
    }
  }
});

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