Highcharts 饼图系列标签

Question

如何为每个系列做一个标签？类似于 img.

Answer 1

创建此标签的最佳选择是使用渲染器函数：

function renderLabel(chart) {

  chart.labelsGroup = chart.renderer.g("labelsGroup").attr({
    zIndex: 100
  }).add();
  chart.series.forEach((series, i) => {
    chart.labelGroup = chart.renderer.g("labelGroup").attr({
      zIndex: 100
    }).add(chart.labelsGroup);

    chart.label = chart.renderer.label(
        series.name,
        chart.plotSizeX / 2 + chart.plotLeft - series.data[0].shapeArgs.r + (series.data[0].shapeArgs.r - series.data[0].shapeArgs.innerR) / 2,
        (chart.plotHeight) / 2 + chart.plotTop)
      .css({
        color: '#FFFFFF',
        zIndex: 999,
      })
      .attr({
        align: 'center',
        padding: 0,
        zIndex: 999,
      }).add(chart.labelGroup)
    let height = chart.label.getBBox().height;
    chart.labelGroup.translate(null, -height / 2)
  })
}

并在 window 大小改变时使用渲染事件重绘它 API

检查这个例子：DEMO

Highcharts 饼图系列标签

Highcharts pie series label

highcharts

pie-chart