试图在Kendo angular2 2中构建一个饼图。会显示饼图，但不会显示标签。

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，“上方”“下面”"insideEnd“”insideEnd“”左“"outsideEnd”“右”；距离，除20以外的任何数字通常都是一个不错的数量；format，使用IntlService format方法。

-编辑--

这并不完全是你想要的，但是这样，你至少不能看到每个片段的名称：

<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松弛团队：https://kendouiangular2.slack.com/