[英]Add text in the hole of Donut using ReactJs in Kendo-react-UI
我们应该如何在 Kendo-react-charts 中使用 reactJs 在圆环图的孔中插入文本。 在文档中显示了它,但它在现实中不起作用。 文档链接: https : //www.telerik.com/kendo-react-ui/components/charts/series-types/donut/#toc-using-drawing-visuals
我的代码:
import React, { Component } from 'react';
import 'hammerjs';
import { Chart, ChartLegend, ChartSeries, ChartSeriesItem, ChartSeriesLabels } from '@progress/kendo-react-charts';
const donutCenterRenderer = () => (<span>22.5%</span>);
const labelContent = (e) => (e.category);
class Donut extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div className = "container">
<Chart seriesColors={['#050594', '#0E0EC3', '#4343DD', '#8181D9', '#B4B4E1', 'white']}>
<ChartSeries SeriesLabelsPosition = "center">
<ChartSeriesItem type = "donut" data = {this.props.data} categoryField = "kind" field = "share" holeSize={50}>
</ChartSeriesItem>
</ChartSeries>
<ChartLegend visible = {true} labels = "black" position = "bottom"/>
</Chart>
<h5>Donut chart</h5>
</div>
);
}
}
export default Donut;
和作为道具传递的数据:
data: [ {
"kind": "Hydroelectric", "share": 0.175,
}, {
"kind": "Nuclear", "share": 0.238
}, {
"kind": "Coal", "share": 0.118
}, {
"kind": "Solar", "share": 0.052
}, {
"kind": "Wind", "share": 0.225
}, {
"kind": "Other", "share": 0.192
} ]
Chart
具有称为donutCenterRender 的属性,可用于将某些内容放置到图表的中心。 下面是基本用法:
<Chart
donutCenterRender = {() => (<span>something here</span>)}
...additional properties
>
...child configuration
</Chart>
您还可以在官方 KendoReact 存储库中找到此问题,并提供进一步的讨论和示例。
我看到您已经定义了donutCenterRenderer
,但它没有在您的示例中的任何地方使用。
使用 kendoChartDonutCenterTemplate 将文本添加到圆环图的中心
<ng-template kendoChartDonutCenterTemplate>
<h3>99%</h3>
Accepted
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.