javascript - Highcharts 气泡图数据标签中的居中文本

Question

我正在使用 Angular 2 和 ng2-highcharts图书馆。

这是我的:http://jsfiddle.net/jzawgwef/3/

我想让文本在气泡内居中。

我尝试在 dataLabel 属性中添加样式:

dataLabels: {
  enabled: true,
  style: {
    width: '150px',
    'text-align': 'center' // this does not work
  },
  format: '{point.name}'
}

我注意到生成的输出具有样式规则 text-align: center 但使用两个属性(x 和 y 进行定位):

<g class="highcharts-data-labels highcharts-series-0 highcharts-bubble-series highcharts-color-0 highcharts-tracker"
    transform="translate(64,46) scale(1 1)"
    opacity="1">
  <g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 "
      style="text-align:center;"
      transform="translate(185,141)">
    <text x="5"
        y="16"
        style="font-size:11px;font-weight:bold;color:#000000;text-outline:1px contrast;fill:#000000;">
      <tspan x="5" y="16" class="highcharts-text-outline"
          fill="#FFFFFF" stroke="#FFFFFF"
          stroke-width="2px" stroke-linejoin="round">
          Very long data label text I
      </tspan>
      <tspan dy="14" x="5" class="highcharts-text-outline"
          fill="#FFFFFF" stroke="#FFFFFF"
          stroke-width="2px" stroke-linejoin="round">
          want to center
      </tspan>
      <tspan x="5" y="16">
        Very long data label text I
      </tspan>
      <tspan dy="14" x="5"> <!-- This x changes the span position -->
        want to center
      </tspan>
      <title>Very long data label text I want to center</title>
    </text>
  </g>
</g>

有办法吗？

谢谢

Answer 1

如果启用 useHTML对于数据标签:

dataLabels: {
    enabled: true,
    useHTML: true,
    style: {
        width: '150px'
    },
    format: '{point.name}'
}

然后您可以使用 CSS 定位标签:

.highcharts-data-label span {
    text-align: center;
}