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

vxbzzdmp 于 9个月前发布在 Highcharts

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

通过拖动缩放中的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]
  }]

});

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

highcharts

来源：https://stackoverflow.com/questions/77054157/lvl-1-labels-get-messed-up-when-try-to-see-zoom-section-via-drag

1条答案

按热度按时间

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

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

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