尝试在 Kendo-ui-angular2 中制作一个饼图 ui。显示饼图但不显示标签

Question

组件代码如下和html代码。我正在使用 [data] = "item.data" [name] = "item.name" 绑定数据

private series: any[] = [{
    name: ["India","Aus", "Fin"],
    data: [3.907, 7.943, 7.848]
}];

<kendo-chart>
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/">
    </kendo-chart-title>
    <kendo-chart-legend position="top" orientation="horizontal">
    </kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%">
    </kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series" type="donut" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

Answer 1

试试这个：

<kendo-chart>
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/">
    </kendo-chart-title>
    <kendo-chart-legend position="top" orientation="horizontal">
    </kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%">
    </kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series" type="donut" [data]="item.data" [name]="item.name">
            <kendo-chart-series-item-labels>
            </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

在<kendo-chart-series-item-labels>标签内，可以使用如下属性：position, "above" "below" "center" "insideEnd" "left" "outsideEnd" "right"; [距离]，除 20 以外的任何数字通常都是一个不错的数量； format，使用IntlService格式化方法。

--编辑--

这与您要求的不完全一样，但这样一来，您至少看不到每个段的名称：

<kendo-chart>
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/">
    </kendo-chart-title>
    <kendo-chart-legend position="top" orientation="horizontal">
    </kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%">
    </kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item type="donut" [data]="series" field="data" categoryField="name">
            <kendo-chart-series-item-labels visible="true" content="categoryField">
            </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

private series: any[] = [{
    name: "India",
    data: 3.907
}, {
    name: "Aus",
    data: 7.943
}, {
    name: "Fin",
    data: 7.848
}];

欢迎加入 Kendo UI slack 团队：https://kendouiangular2.slack.com/

尝试在 Kendo-ui-angular2 中制作一个饼图 ui。显示饼图但不显示标签

Trying to build a pie chart in Kendo-ui-angular2. Pie chart is displayed but not labels

kendo-ui-angular2