Highcharts 打包气泡使用 HTML 数据标签并在父节点顶部添加 label

Question

我为数据标签创建了一个带有 useHTML 选项的打包气泡，因为我希望这些标签在每个气泡中居中。

结果很好，你可以在这里看到： https://jsfiddle.net/vegaelce/1tk0m4qs/8/

我的问题是关于父节点 label，我希望将它放在每个主要气泡的顶部（如官方演示中所示： https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree /master/samples/highcharts/series-packedbubble/packed-dashboard )

但是由于我需要在 dataLabels 上设置 useHTML 标志，父节点的 label 被放置在每个主要气泡的中心（这不好）。

如果在我的示例中设置 useHTML: false，父级的 label 会正确放置在主要气泡的顶部，但每个气泡的标签不再居中。

dataLabels: {
          useHTML: true,

我怎样才能混合这两个东西（使用 HTML 并将父 label 放在气泡顶部）？

Answer 1

您无需启用useHTML即可将标签居中。 设置align: 'left'和'text-anchor': 'middle'样式就足够了。 例如：

  plotOptions: {
    packedbubble: {
      ...,
      dataLabels: {
        ...,
        align: 'left',
        style: {
          'text-anchor': 'middle'
        }
      }
    }
  }

---

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

API 参考： https://api.highcharts.com/highcharts/series.packedbubble.dataLabels