如何让树形图数据标签始终如一地换行？

Question

我正在制作一个带有一些相当长的数据标签的 Highcharts 树状图。有时它们会换行，有时 highcharts 会用省略号截断它们（但实际上它似乎可以换行）。不一致使它看起来有点混乱。有没有办法强制标签始终换行？

这是一个例子：

Highcharts.chart('container', {

  colorAxis: {
    minColor: '#003A85',
    maxColor: '#F7F8FA',
    visible: false
  },

  series: [{
    type: "treemap",
    layoutAlgorithm: 'strip',
    layoutStartingDirection: 'horizontal',
    dataLabels: {
      align: 'left',
      verticalAlign: 'top',
      x: 5,
      y: 5,
      style: {
        textShadow: 'unset',
        textOutline: 'none',
        fontSize: '14px',
        fontWeight: 'normal',

      }
    },
    data: [{
      name: 'This is quite a long sentence really, oh well never mind',
      value: 4911,
      colorValue: 0
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3701,
      colorValue: 1
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3602,
      colorValue: 2
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3502,
      colorValue: 3
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3114,
      colorValue: 4
    }]
  }],

  plotOptions: {
    treemap: {
      borderWidth: 0,
      dataLabels: {
        borderRadius: 0,
        shadow: {
          enabled: false
        }
      }
    }
  },
  title: {
    text: 'Highcharts Treemap'
  }
});

#container {
  min-width: 300px;
  max-width: 400px;
  margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

(image) Highcharts treemap with inconsistent label wrapping

Answer 1

结合数据标签选项可以实现更复杂的文本换行控制方式，useHTML: true and displaying dataLabels.format作为字符串，您可以在那里添加样式和自定义。

  plotOptions: {
    treemap: {
      dataLabels: {
        useHTML: true,
        format: '<p class="truncate"><b>{point.name}</b></a>',
        style: {
          textOverflow: 'allow'
        }
      }
    }

现场演示：https://jsfiddle.net/BlackLabel/zkwg2vnq/

如何让树形图数据标签始终如一地换行？

How can I get treemap datalabels to wrap consistently?

highcharts