在Kendo-react-UI中使用ReactJs在甜甜圈的孔中添加文本
在Kendo-react-UI中使用ReactJs在甜甜圈的孔中添加文本
提问于 2018-10-17 04:05:47
我们应该如何在Kendo-react-charts中使用react在圆环图的空洞中插入文本。在文档中显示了它，但它在现实中不起作用。文档链接：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
} ]回答 2
Stack Overflow用户
发布于 2018-10-25 18:50:31
Chart具有名为donutCenterRender的属性，可用于将某些内容放置到图表的中心。以下是基本用法：
<Chart
donutCenterRender = {() => (<span>something here</span>)}
...additional properties
>
...child configuration
</Chart>您还可以在官方KendoReact存储库中找到此issue，其中有进一步的讨论和示例。
我看到您已经定义了donutCenterRenderer，但是在您的示例中并没有使用它。
Stack Overflow用户
发布于 2020-06-07 00:34:24
使用kendoChartDonutCenterTemplate将文本添加到圆环图的中心
<ng-template kendoChartDonutCenterTemplate>
<h3>99%</h3>
Accepted
</ng-template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52843291
复制相关文章
相似问题
腾讯云开发者
