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

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

0 голосов
/ 16 октября 2018

Как мы должны вставлять текст в лунку кольцевых диаграмм, используя реактив в кендо-реактивных диаграммах.В документации это показано, но в действительности это не работает.Ссылка на документацию: 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
            } ]

1 Ответ

0 голосов
/ 25 октября 2018

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

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

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

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

...