Angularjs1.x ES6接入Chart圖表

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

1.Chart

中文網(wǎng)站:http://www.bootcss.com/p/chart.js/

2.Angularjs1.x Chart.js插件

github:https://github.com/jtblin/angular-chart.js
官方網(wǎng)站: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
注意一定要給個(gè)父節(jié)點(diǎn),然后給父節(jié)點(diǎn)一個(gè)寬度。不然無法顯示

<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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (文·文武它術(shù)) 離開烏鎮(zhèn)二十多天了,但遲遲未能給她留下些許文字。一方面沒有時(shí)間;另一方面始終不能在記憶中,...
    文武它術(shù)閱讀 506評論 0 1
  • 有些時(shí)候,身邊總會有那么一個(gè)人,優(yōu)秀但不低調(diào),謙虛但不走心。比如: A:我這次成績不太好,努力了一學(xué)期才剛及格,把...
    閑人木易閱讀 529評論 0 0
  • 時(shí)常會聽到周圍的朋友同事家人,或多或少的抱怨著各種瑣事,在碰到情緒問題時(shí),很多都選擇通過述說、抱怨這類的途徑來消化...
    vivi_w閱讀 563評論 0 0

友情鏈接更多精彩內(nèi)容