0

我们应该如何在 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
            } ]
4

2 回答 2

0

使用 kendoChartDonutCenterTemplate 将文本添加到圆环图的中心

<ng-template kendoChartDonutCenterTemplate>
       <h3>99%</h3>
        Accepted
 </ng-template>
于 2020-06-06T16:34:24.233 回答
0

Chart有一个名为donutCenterRender的属性，可用于将某些东西放入图表的中心。下面是基本用法：

<Chart 
     donutCenterRender = {() => (<span>something here</span>)}
     ...additional properties 
>
    ...child configuration
</Chart>

您还可以在 KendoReact 官方存储库中找到此问题，并提供进一步的讨论和示例。

我看到您已经定义了donutCenterRenderer，但在您的示例中的任何地方都没有使用它。

于 2018-10-25T10:50:31.193 回答