highcharts 当试图通过拖动查看缩放部分时,Lv1标签会变得混乱

vxbzzdmp  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(132)

通过拖动缩放中的Facing问题不适用于分组类别。
当试图通过拖动查看缩放部分时,Lv 1标签会变得混乱
示例-https://jsfiddle.net/5bjzgner/
enter image description here
代码--

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

});

有人能为这件事提供一些变通的建议吗?
谢谢你,谢谢

dgtucam1

dgtucam11#

缩放或更改图表宽度时导致标签位置不更新的问题是您的自定义标签格式设置函数(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;
      }
    }
  }
});

Demohttps://jsfiddle.net/BlackLabel/r5zn4tuf/

相关问题