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)
  })
}

并在窗口大小更改API

时使用render事件重绘它

检查以下示例：DEMO