试图在Kendo-ui-angular2中构建一个饼图。显示饼图但不显示标签

Question

组件代码如下，代码如下。我使用[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>标签，你可以使用属性，如：位置，“上面”，“下面”，“中心”，“ insideEnd“”left“”outsideEnd“”right“; [距离]，任何数字，但20通常是一个体面的数额;格式，使用IntlService格式方法。

- 编辑 -

它不太你问什么，但这样一来，你不能看到ATLEAST各段的名称：

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

• 随时加入剑道UI懒队：https://kendouiangular2.slack.com/