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

如果您为dataLabels启用useHTML：

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

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

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

Highcharts中的中心文字＆＃39;气泡图的数据标签

1 个答案: