Допомога у програмуванні, відповіді на питання / Кендо ui angleous2 / Спробуйте побудувати кругову діаграму в кендо-уі-кутовий2. Кругова діаграма відображається, але не мітки - kendo-ui-angular2

Спробую побудувати кругову діаграму в кендо-уі-кутовий2. Кругова діаграма відображається, але не мітки - kendo-ui-angular2

Компонентний код, як показано нижче, і 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>

Відповіді:

2 для відповіді № 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> тег, ви можете використовувати такі властивості, як: позиція, "вище" "нижче" "центр" "всередину" "" "" "" ліворуч "" поза "" "" "" "" "правильно"; [відстань], будь-яке число, крім 20, зазвичай є пристойною сумою; формат, Використовує метод формату IntlService.

--EDIT--

Це не зовсім те, що ви просили, але таким чином, ви не можете побачити Імена кожного сегмента:

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