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

Posted 2021-05-05

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

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

我提前感谢任何回应！

答案

您可以使用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/

输出：