試圖在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/