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

Question

我在 x 轴中添加了 stackLabels，我添加了一个格式化程序函数，它会截断 x 轴标签以适应图表大小：像这样：

然而，随着系列柱形图的数据和宽度发生变化，我还想更改 string.currently 上的截断字符数，我有这个：

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>`;
            },
          }

无论系列的大小如何，上面的内容都会截断字符串 column.ex 如果有更宽的系列可用，它仍会截断为 3。像这样

https://jsfiddle.net/ka9uhx10/

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

有什么方法可以根据图表点宽将子串字符号动态传递给字符串吗？

Answer 1

尝试使用 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

how to determine the width of every column series present in the chart- highhcarts

javascript

highcharts

react-highcharts