highcharts - HighChart 气泡类型。datalabel 文本从 plotOptions 区域溢出

Question

这是演示：在线演示

数据标签太长无法显示，我希望它在气泡内，溢出的文本显示为“ACDE ...”

标签： highchartsreact-highcharts

Answer 1

对于这种情况，我可以提出两种解决方案。

• 将溢出设置为省略号并为 dataLabel 设置一些宽度：

演示：https ://jsfiddle.net/BlackLabel/ye5s7m6g/1/

 plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: "{point.name}",
          style: {
            textOverflow: 'ellipsis',
          width: 45
        }
      }
    }
  },

API：https ://api.highcharts.com/highcharts/series.bubble.dataLabels.style

• 在 dataLabels 中启用 textPath 功能：

演示：https ://jsfiddle.net/BlackLabel/0srgnvxd/1/

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: "{point.name}",
                textPath: {
            enabled: true
        }
      }
    }
  },

API：https ://api.highcharts.com/highcharts/series.bubble.dataLabels.textPath.enabled