向饼图中心添加文本：Highcharts

Question

如何将总值添加到饼图的中心。我尝试了以下内容。它应该基本上显示 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;

Answer 1

使用Highcharts.SVGRenderer class 并在计算出的位置添加一个文本元素。示例：

    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,
                            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

向饼图中心添加文本：Highcharts

Adding text to the center of pie chart: Highcharts

javascript

reactjs

highcharts

react-highcharts