[英]Adding text to the center of pie chart: Highcharts
How do I add total value to the center of pie chart.如何将总值添加到饼图的中心。 I have tried the following.
我尝试了以下方法。 It should basically show the total value of y values.
它基本上应该显示 y 值的总值。
Input输入
export const data = [
{
y: 15,
name: "Category 1"
},
{
y: 25,
name: "Category 2"
},
{
y: 35,
name: "Category 3"
},
];
Here it should show 75 at the centre of the pie chart.在这里,它应该在饼图的中心显示 75。 (ie total count of y values) Sandbox: https://codesandbox.io/s/react-line-chart-forked-edqfb?file=/src/LineChart.js
(即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;
Use Highcharts.SVGRenderer
class and add a text element in a calculated position.使用
Highcharts.SVGRenderer
class 并在计算的 position 中添加文本元素。 Example:例子:
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
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/mrg2qt6c/现场演示: http://jsfiddle.net/BlackLabel/mrg2qt6c/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text API 参考: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.