highcharts - 将 dataLabels 添加到实体量规

Question

如何在实心仪表图表的每个点前面添加数据标签。我正在尝试实现这样的目标

谢谢

标签： highcharts

Answer 1

您可以在事件中添加自定义数据标签render，例如：

chart: {
  ...,
  events: {
    render: function() {
      var dataLabels = ['Custom DL1', 'Custom DL2', 'Custom DL3'],
        chart = this,
        series = chart.series;

      dataLabels.forEach(function(dl, i) {
        if (!series[i].customDL) {
          series[i].customDL = chart.renderer.text(dl)
            .attr({
              zIndex: 10
            })
            .add(series[i].group);
        }

        series[i].customDL.translate(
          chart.chartWidth / 2 + 10,
          chart.plotHeight / 2 - series[i].points[0].shapeArgs.innerR -
          (series[i].points[0].shapeArgs.r - series[i].points[0].shapeArgs.innerR) / 2
        );
      });
    }
  }
}

---

现场演示： https ://jsfiddle.net/BlackLabel/c5eq2htg/

API参考：

https://api.highcharts.com/highcharts/chart.events.render

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text