Aide à la programmation, réponses aux questions / Kendo ui angular2 / Essayer de construire un camembert dans Kendo-ui-angular2. Le graphique à secteurs est affiché, mais pas les étiquettes - kendo-ui-angular2

Essayer de construire un camembert dans Kendo-ui-angular2. Le graphique à secteurs est affiché mais pas les étiquettes - kendo-ui-angular2

Le code composant est comme ci-dessous et le code html. j'utilise [data] = "item.data" [name] = "item.name" lier les données

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>

Réponses:

2 pour la réponse № 1

Essaye ça:

<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>

Dans le <kendo-chart-series-item-labels> balise, vous pouvez utiliser des propriétés telles que: position, "dessus" "dessous" "centre" "insideEnd" "left" "outsideEnd" "right"; [distance], n'importe quel nombre sauf 20 est habituellement un montant décent; format, Utilise la méthode de format IntlService.

--MODIFIER--

Ce n’est pas tout à fait ce que vous avez demandé, mais de cette façon, vous ne pouvez pas voir au moins les noms de chaque segment:

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