没有距离技巧的饼图（highcharts）内的标签

Question

我想在饼图中直接在切片内部显示一些标签。问题是，我已经在使用不同值的数据标签，除了现有的数据标签之外，还需要在图表内（可能还有其他地方）添加标签。什么是最好的方法，因为标签距离技巧不起作用？

也许与此相关，我正在尝试使用渲染器，但是这样渲染的文本位于图表下方。

我提前感谢任何回复！

Answer 1

您可以使用annotations module来定义附加到某些点的标签。

您可以通过以下几个选项控制距离点的距离：

• align - 左，中，右
• verticalAlign - 顶部，中部，底部
• x - 一个数字
• y - 一个数字
• distance - 正数

对于饼图切片中的标注居中，请将x和y设置为零。

const data = [10, 50, 50, 20]

Highcharts.chart('container', {

  chart: {
    type: 'pie'
  },

  series: [{
    keys: ['y', 'id'],
    data: data.map((v, i) => ([v, String(i)]))
  }],

  annotations: [{
    labels: data.map((v, i) => ({
      point: String(i),
      x: 0,
      y: 0
    }))
  }]
});

直播示例：http://jsfiddle.net/ndopca3p/

输出：