Angularjs1.x ES6接入Chart图表

是不是ECharts国人用的多,看国外大佬做的Chart,highChart的Angular插件做的都很好

1.Chart

中文网站:http://www.bootcss.com/p/chart.js/

2.Angularjs1.x Chart.js插件

github:https://github.com/jtblin/angular-chart.js
官方网站:http://jtblin.github.io/angular-chart.js/

3.配置

1)安装

npm install angular-chart.js --save

2)引入

import 'chart.js';
import 'angular-chart.js';

3)HTML
注意一定要给个父节点,然后给父节点一个宽度。不然无法显示

<div style="width:100%;">
    <canvas id="doughnut" style="width:1000px;height:1000px;" class="chart chart-doughnut" chart-data="data" chart-labels="labels">
</canvas>
</div>

4.效果

图片.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (文·文武它术) 离开乌镇二十多天了,但迟迟未能给她留下些许文字。一方面没有时间;另一方面始终不能在记忆中,...
    文武它术阅读 443评论 0 1
  • 有些时候,身边总会有那么一个人,优秀但不低调,谦虚但不走心。比如: A:我这次成绩不太好,努力了一学期才刚及格,把...
    闲人木易阅读 494评论 0 0
  • 时常会听到周围的朋友同事家人,或多或少的抱怨着各种琐事,在碰到情绪问题时,很多都选择通过述说、抱怨这类的途径来消化...
    vivi_w阅读 515评论 0 0