2016-10-05 3 views
0

Может ли один помочь мне сделать диаграмму компонент kendoui angular2Как сделать kendoui angular2 chartcomponent в donutchart

в кольцевой диаграмме

я смог Gt диаграммы, следуя пример в этом страница http://www.telerik.com/kendo-angular-ui/components/charts/, но как сделать это как кольцевой диаграммы

Благодаря & Rds, Raghu S

ответ

2

Вот пример шаблона для пончиков Chart

<kendo-chart> 
     <kendo-chart-title text="Donut Chart"></kendo-chart-title> 
     <kendo-chart-series-defaults type="donut"> 
     </kendo-chart-series-defaults> 
     <kendo-chart-series> 
     <kendo-chart-series-item [data]="seriesData"> 
     </kendo-chart-series-item> 
     </kendo-chart-series> 
    </kendo-chart> 

Вы можете проверить его в этом Plunker:

http://plnkr.co/edit/nvOfXk7VGhOl2f4esCfL?p=preview

+0

yaa благодарит за помощь, что она работает для меня. Вы можете помочь мне показать ярлыки/легенды и где я должен искать все эти свойства диаграммы. – RaghuS

+0

В этой статье показано, как настроить различные части диаграммы: http://www.telerik.com/kendo- angel-ui/components/charts/chart/structure/ – smn

+0

iam получает диаграмму пончика, но не может достичь легенд для диаграммы пончиков, может кто-нибудь помочь – RaghuS

1
@Component({ 
    selector: 'my-app', 
    template: ` 
     <kendo-chart> 
      <kendo-chart-title text="Simple Donut Chart"> 
      </kendo-chart-title> 
      <kendo-chart-series-defaults type="donut"> 
      </kendo-chart-series-defaults> 
      <kendo-chart-legend position="top"> 
      </kendo-chart-legend> 
      <kendo-chart-series> 
      <kendo-chart-series-item [data]="seriesData"> 
      </kendo-chart-series-item> 
      </kendo-chart-series> 
     </kendo-chart> 
    ` 
}) 
class AppComponent { 
    private seriesData = [[4,"1st"],[7,"2nd"],[5,"3rd"]]; 
} 

Plunker ссылка: http://plnkr.co/edit/86dA5xCCSxatBOmapnGo?p=preview

1

Добавить type="donut" с kendo-chart-series-item теге.

Смежные вопросы