如何确定图表高图表中每个列系列的宽度

问题描述

我在x轴上添加了stackLabel，我添加了格式化程序功能，该功能将截断x轴标签以适合图表大小：

但是随着数据和系列柱形图的宽度发生变化，我也想更改字符串上截断的字符数。目前，我有以下内容：

stackLabels: {
            enabled: true,verticalAlign: 'bottom',//y:160,style: {
              fontWeight: 'bold',color: 'gray'
            },formatter: function () {
             let label = this.stack || '';
              let truncatedLabel = label.length <= 3
              ? label  : `${label.substring(0,3)}...`;
                  
             return `<span>${truncatedLabel}</span>`;
            },}

以上内容将始终截断字符串，而不管序列列的大小如何。如果有更宽的序列可用，它仍将截断为3。

https://jsfiddle.net/ka9uhx10/

相反，我想展示这个 https://jsfiddle.net/f2bv35gy/

是否有任何方法可以根据图表点的宽度将子字符串的char号动态传递给字符串？

解决方法

尝试使用dataLabels代替stackLabels，并使用以下配置：

  events: {
    render() {
      const chart = this;

      chart.series.forEach(s => {
        s.points.forEach(p => {
          if (p.dataLabel && p.dataLabel.width > p.pointWidth || p.dataLabel && p.dataLabel.text.styles.textOverflow) {
            let dataLabel = p.dataLabel;
            dataLabel.css({
              width: p.pointWidth,textOverflow: 'ellipsis'
            })

            dataLabel.translate(p.barX - 5,chart.plotHeight)
          }
        })
      })
    }
  }

演示：https://jsfiddle.net/BlackLabel/47e3msuk/

API：https://api.highcharts.com/class-reference/Highcharts.CSSObject#textOverflow

API：https://api.highcharts.com/highcharts/series.line.dataLabels.overflow

API：https://api.highcharts.com/highcharts/chart.events.render

highcharts highcharts javascript react-highcharts