Highcharts 饼图注释未居中答案

【问题标题】：Highcharts pie chart annotations are not centeringHighcharts 饼图注释未居中
【发布时间】：2020-01-15 23:21:43
【问题描述】：

我有 2 个饼图并排呈现，对应 2 个系列。我想在每个系列下添加一个标题，但不想使用 title 属性，因为每个 Highcharts 组件只有一个标题。我已选择使用注释，这很有效，这需要我手动指定注释标签的 x 和 y 坐标。我正在使用一个公式来计算这些确切的位置。但是，当我渲染注释时，它们似乎并没有完全排在每个图表的中间。

我的图表选项如下所示：

const width = 700
const height = 200

Highcharts.chart('container', {
chart: {
    type: 'pie',
    width,
    height
},

plotOptions: {
    pie: {
        dataLabels: {
            enabled: false
        }
    }
},
annotations: [{
    labels: [{
        point: {
            x: 0.33 * width,
            y: height
        },
        text: "centered"
    }]
}, {
    labels: [{
        point: {
            x: 0.635 * width,
            y: height
        },
        text: "also centered"
    }]
}],
series: [
    {
        center: ['33%', '50%'],
        type: 'pie',
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    },
    {
        center: ['66%', '50%'],
        type: 'pie',
        data: [
            ['Firefox',   44.2],
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});

这是现在的样子：https://jsfiddle.net/0cfztdms/

这就是我想要在不对 x 位置进行硬编码的情况下实现的目标： Pie charts with centered annotations

【问题讨论】：

标签： highcharts

【解决方案1】：

我认为更好的解决方案是通过使用 SVGRendere 工具呈现自定义标签，而不是使用注释功能。

演示：https://jsfiddle.net/BlackLabel/L08bvngk/

render() {
  let chart = this;

  chart.series.forEach((s, i) => {
    if (chart['label' + i]) {
      chart['label' + i].destroy();
    }
    chart['label' + i] = chart.renderer.label('testtestestest', 0, 0)
      .css({
        color: '#FFFFFF'
      })
      .attr({
        fill: 'rgba(0, 0, 0, 0.75)',
        padding: 8,
        r: 5,
        zIndex: 6
      })
      .add();
    //center the label
    chart['label' + i].translate(s.center[0] + chart.plotLeft - chart['label' + i].getBBox().width / 2, chart.plotHeight)
  })
}

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API：https://api.highcharts.com/highcharts/chart.events.render

【讨论】：

【解决方案2】：

我找到了一种无需使用 Highcharts annotations module 进行手动计算即可将标签居中的方法。设置anchorX = 'center' 和anchorY = 'middle'（这些道具来自注解模块）将自动为您将注解居中。 Read more here

const width = 600;

annotations: [{
  labels: [{
    point: {
      x: (1 / numberOfCharts + 1) * width,
      y: 200,
      anchorX: 'center',
      anchorY: 'middle'
    },
    text: 'Label 1'
  }, {
    point: {
      x: (1 / numberOfCharts + 1) * 2 * width,
      y: 200,
      anchorX: 'center',
      anchorY: 'middle'
    },
    text: 'Label 2'
  }
}]

【讨论】：