javascript - 饼图( 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/

输出: