美文网首页
Angularjs1.x ES6接入Chart图表

Angularjs1.x ES6接入Chart图表

作者: ZZES_ZCDC | 来源:发表于2017-10-27 15:54 被阅读31次

    是不是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

    相关文章

      网友评论

          本文标题:Angularjs1.x ES6接入Chart图表

          本文链接:https://www.haomeiwen.com/subject/smtdpxtx.html