将文本添加到饼图的中心：Highcharts

问题描述

如何将总值添加到饼图的中心。我尝试了以下方法。它应该基本上显示y值的总值。

输入

export const data = [
  {
    y: 15,name: "Category 1"
  },{
    y: 25,name: "Category 2"
  },{
    y: 35,name: "Category 3"
  },];

这里应该在饼图的中心显示 75。 （即 y 值的总数） 沙盒：https://codesandbox.io/s/react-line-chart-forked-edqfb?file=/src/LineChart.js

import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);

function Chart(props) {
  const chartOptions = {
    chart: {
      type: "pie",height: 250
    },title: {
      verticalAlign: "middle",floating: true,text: "test"
    },legend: {
      layout: "vertical",align: "right",verticalAlign: "top",itemmarginTop: 5,itemmarginBottom: 5
    },plotOptions: {
      pie: {
        allowPointSelect: true,cursor: "pointer",dataLabels: {
          enabled: false
        },showInLegend: true
      }
    },series: [
      {
        data: props.chartData,size: "80%",innerSize: "50%,",text: "Test"
      }
    ]
  };
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

export default Chart;

解决方法

使用 Highcharts.SVGRenderer 类并在计算位置添加文本元素。示例：

    chart: {
        ...,events: {
            render: function() {
                var series = this.series[0],seriesCenter = series.center,x = seriesCenter[0] + this.plotLeft,y = seriesCenter[1] + this.plotTop,text = 'Total: ' + series.total,fontMetrics = this.renderer.fontMetrics(16);

                if (!this.customTitle) {
                    this.customTitle = this.renderer.text(
                            text,null,true
                        )
                        .css({
                            transform: 'translate(-50%)',fontSize: '16px',color: 'red'
                        })
                        .add();
                }

                this.customTitle.attr({
                    x,y: y + fontMetrics.f / 2
                });
            }
        }
    }

---

现场演示： http://jsfiddle.net/BlackLabel/mrg2qt6c/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text