Código de componente é como abaixo e o código html. estou usando [data] = "item.data"
[name] = "item.name"
ligar os dados
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>
Respostas:
2 para resposta № 1Tente isto:
<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>
Dentro do <kendo-chart-series-item-labels>
tag, você pode usar propriedades como: posição, "acima" "abaixo" "center" "insideEnd" "left" "outsideEnd" "right"; [distância], qualquer número, mas 20 é geralmente um valor decente; format, Usa o método de formato IntlService.
--EDITAR--
Não é bem o que você pediu, mas desta forma, você não pode pelo menos ver os nomes de cada segmento:
<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
}];
- Sinta-se à vontade para se juntar à equipe de folga do Kendo UI: https://kendouiangular2.slack.com/