DevExtreme for React 上的圆环图标签

Question

我正在尝试使用 DevExtreme 为 React 生成甜甜圈图，但由于缺乏从其他框架改编代码源的文档。我可以用道具接收到的数据创建图形，但我很难为它们生成标签。

目前我只能将我的论点用作图例，如下所示： donut chart with legend

而且我需要它像显示在标签中一样，例如： donut chart with labels

我正在使用库 DevExtreme React Wrappers ansy 组件 Donut 是这样的：

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;

任何帮助将不胜感激。 :)

Answer 1

Label 是 Series 的一部分，因此 Label 标签应该放在 Series 中。系列argumentField应该设置为'region'（根据demo）

这是关于Chart的配置，可惜18.1.5-alpha.10版本对Label组件有回归。所以我会向您推荐以下内容：

1) 将 "devextreme-react" 降级为 "18.1.5-alpha.9" 并跟踪 the issue

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>
        );
    }
}

DevExtreme for React 上的圆环图标签

Donut chart labels on DevExtreme for React

charts

label

reactjs

devextreme