Добавьте текст в отверстие Donut, используя ReactJs в Kendo-Reaction-UI

Question

Как мы должны вставлять текст в лунку кольцевых диаграмм, используя реагировать на кендо-реактивные диаграммы. В документации это показано, но в реальности это не работает. Ссылка на документацию: https://www.telerik.com/kendo-react-ui/components/charts/series-types/donut/

мой код:

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
            } ]

Answer 1

Chart иметь свойство под названием donutCenterRender, которое можно использовать для размещения чего-либо в центре диаграммы. Вот основное использование:

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

Вы также можете найти эту проблему в официальном репозитории KendoReact с дальнейшим обсуждением и примерами.

Я вижу, что вы определили donutCenterRenderer, но он не используется нигде в вашем образце.

Answer 2

Используйте kendoChartDonutCenterTemplate, чтобы добавить текст в центр кольцевой диаграммы

<ng-template kendoChartDonutCenterTemplate>
       <h3>99%</h3>
        Accepted
 </ng-template>