专栏首页技术综合Angularjs1.x ES6接入Chart图表

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 给初学者的Gulp教程(译)

    Gulp是一个在你开发web时,帮助你完成几个任务的工具。它经常用来进行一些前端任务,比如:

    治电小白菜
  • jsp作业——简单的试卷和自动打分

    治电小白菜
  • NodeJS使用Redis键的过期回调

    当我支付宝创建订单后, 需要定时的把没有完成的订单给关闭, 这时候需要有个定时任务, 或者队列来完成, 不想安装兔子, 那就用本来就安装了的Redis来简单实现

    治电小白菜
  • SpringBoot图文教程6—SpringBoot中过滤器的使用

    过滤器是Javaweb非常基础的一个概念,属于Servlet的一部分。本文将会使用SpringBoot配置过滤器。在代码实现之前先通过一个简单的小案例解释一下什...

    鹿老师的Java笔记
  • Extreme Learning Machines 极限学习机

    最近在看教授很久之前的一篇 Paper ,里面有提到极限学习机(ELM),所以查找资料了解了一下。在查找的过程中,发现很多人抨击 ELM,说其是夸大了贡献,连 ...

    caoqi95
  • 教程 | 通过可视化隐藏表示,更好地理解神经网络

    将神经网络可视化是非常有趣的。对于监督学习而言,神经网络的训练过程可以看做是学习如何将一组输入数据点转换为可由线性分类器进行分类的表示。本文我想利用这些(隐藏)...

    机器之心
  • Java多线程面试准备:聊聊Executor框架

    在HotSpot VM的线程模型中,Java线程被一对一映射为本地操作系统线程。Java线程启动时会创建一个本地操作系统线程;当Java线程终止时,这个操作系统...

    好好学java
  • Spring官网阅读系列(七):容器的扩展点(FactoryBean)

    上面这些概念可能刚刚说的时候大家不是很明白,下面我们通过FactoryBean的一些应用来进一步体会这个接口的作用。

    秃顶的Java程序员
  • iOS 强制关闭暗黑模式

    一看好多界面都是这样,奇怪也没有改过啥代码,想了半天可能暗黑模式, 暗黑模式设置的自动,到点了就自动变成暗黑模式了。

    赵哥窟
  • Spring官网阅读(七)容器的扩展点(二)FactoryBean

    上面这些概念可能刚刚说的时候大家不是很明白,下面我们通过FactoryBean的一些应用来进一步体会这个接口的作用。

    程序员DMZ

扫码关注云+社区

领取腾讯云代金券