Ярлыки пончиков на DevExtreme for React - PullRequest
Новая
       48

Ярлыки пончиков на DevExtreme for React

0 голосов
/ 15 сентября 2018

Я пытаюсь сгенерировать кольцевые диаграммы с помощью DevExtreme for React, а также из-за отсутствия документации, адаптирующей исходный код из других сред.Я могу создать графику с данными, полученными реквизитами, но мне трудно создавать для них метки.

В настоящее время я могу использовать свои аргументы только в качестве легенды, как показано здесь: кольцевая диаграммас легендой

И мне нужно, чтобы это было похоже на отображение в ярлыках, например: Кольцевая диаграмма с метками

Я использую библиотеку DevExtreme React Wrappers Любой компонент Пончик выглядит примерно так: 

import React from 'react';
import PieChart, {Series, Label, Legend, Tooltip} from 'devextreme-react/ui/pie-chart';

class Donut extends React.Component {

    render(){

        return (

                <PieChart
                    type={"doughnut"}
                    palette={"Soft Pastel"}
                    dataSource={this.props.dataSource}
                  >
                  <Legend
                      visible={true} // should be false because I don't want legends, but currently I need them
                      horizontalAlignment={"left"}
                      verticalAlignment={"bottom"}
                      margin={0}
                  />
                  <Series
                      argumentField={'arg'}
                  />
                  <Tooltip
                      enabled={true}
                      shared={true}
                  />
                  <Label //I've tried so many variations adapted from JQuery or Angular documentation, but nothing seems to work.
                      visible={true}
                      format={'fixedPoint'}
                      argumentField={'arg'}
                    />
                </PieChart>
         );
     }
}
export default Donut;

Любая помощь будет очень признательна.:)

1 Ответ

0 голосов
/ 17 сентября 2018

Метка является частью Серии, поэтому метка Метка должна быть размещена внутри Серии.Для Series argumentField должно быть установлено значение 'region' (в соответствии с демоверсией 1004 *)

Это касается настройки диаграммы, но, к сожалению, версия 18.1.5-alpha.10 имеет регрессиюотносительно компонента Label.Поэтому я бы порекомендовал вам следующее:

1) понизить рейтинг "devextreme-react" до "18.1.5-alpha.9" и отследить проблему

2) изменить код следующим образом: 

var data = [{
    region: "Asia",
    val: 4119626293
}, {
    region: "Africa",
    val: 1012956064
}, {
    region: "Northern America",
    val: 344124520
}, {
    region: "Latin America and the Caribbean",
    val: 590946440
}, {
    region: "Europe",
    val: 727082222
}, {
    region: "Oceania",
    val: 35104756
}];

class Donut extends React.Component {

    render() {

        return (

            <PieChart
                type={"doughnut"}
                palette={"Soft Pastel"}
                dataSource={data}
            >
                <Legend
                    visible={true} // should be false because I don't want legends, but currently I need them
                    horizontalAlignment={"left"}
                    verticalAlignment={"bottom"}
                    margin={0}
                />
                <Series
                    argumentField={'region'}
                >
                    <Label
                        visible={true}
                        format={'fixedPoint'}
                        connector={{ visible: true }}
                    />
                </Series>
                <Tooltip
                    enabled={true}
                    shared={true}
                />
            </PieChart>
        );
    }
}
...