Highcharts 馅饼系列标签答案

【问题标题】：Highcharts pie series labelHighcharts 馅饼系列标签
【发布时间】：2018-11-29 15:28:09
【问题描述】：

如何为每个系列制作单个标签？类似于 img 中的内容。

【问题讨论】：

看看这个：highcharts.com/demo/gauge-activity
如何设置这个图标的大小？我需要将它们与绘图区域一起调整大小的可能性

【解决方案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

查看此示例：DEMO

【讨论】：