如何将 kendo ui angular 2 图表组件制作为圆环图

Question

谁能帮我制作kendoui angular2的图表组件

作为圆环图

我可以按照本页中的示例对图表进行 gt http://www.telerik.com/kendo-angular-ui/components/charts/ 但是如何将其制作成圆环图

谢谢&Rds，拉古 S

Answer 1

这是圆环图的示例模板

    <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

Answer 2

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

笨蛋 link: http://plnkr.co/edit/86dA5xCCSxatBOmapnGo?p=preview

Answer 3

使用您的 kendo-chart-series-item 标签添加 type="donut"。

如何将 kendo ui angular 2 图表组件制作为圆环图

How to make kendoui angular2 chartcomponent as donutchart

kendo-ui-angular2

angular