Chart.js 是一个 Open Source 的 JavaScript Chart Library。它一共有 6 中 Chart,全都是 HTML5 based。

底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图、柱形图、圆饼图等,这样很容易在html网页中实现动态图的效果:

Line Chart

Bar Chart
Radar Chart Pie Chart
Polar Area Chart Doughnut Chart
快速上手

你可以到 github下载Chart.js: https://github.com/nnnick/Chart.js。Chart.js 只需要一个 .js 文件,你可以选择一般版的 Chart.js,也可以选择瘦身版的 Chart.min.js。

從从github 下载后,在 samples 资料夹就有 6 中 Chart 的范例。比如打開 samples/line.html 後,浏览器马上就出现这样一张 Line Chart:

line.html 的內容如下 (JavaScript 部份):

如何动态增加数据点?

Chart.js 沒有提供动态增加数据点的方法,这实在有点可惜。不过,我花了点时间研究了一下,发现还是有办法的。我的方法是这样的:在修改 datasets 的內容后,就再调用 new Chart() 重新产生 Chart。程式代码范例如下:

有一点要特別注意,因為 Chart.js 在画图时会有动画,所以必须把 animation 设成 flase 把动画关掉。

然后就可以动态增加数据点:

Chart.js: 一个简单的 JS Chart Library的更多相关文章

  1. 创建node.js一个简单的应用实例

    在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...

  2. 一个简单的js面试题

    在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求 给一个数组的最后 ...

  3. 一个简单的JS倒计时

    看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时) ...

  4. 一个简单的 js 时间对象创建

    JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date();          //创建一个时间对象 myDate.g ...

  5. three.js一个简单demo学些和讲解

    叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. 一个简单的JS日期挂历脚本

    分享一个JS脚本做的日期挂历,在需要的时候可以引入你的程序. 如需单独引入这个脚本,请将它保存在一个文件中然后引入它:如这样 <script type="text/javascript ...

  7. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. isMobile 一个简单的JS库,用来检测移动设备

    点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...

  9. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

随机推荐

  1. CUDA计时

    from:http://blog.sina.com.cn/s/blog_45209f340101341e.html <1>使用cutil.h中的函数 unsigned int timer= ...

  2. Spring 3.x 企业引用开发实战(陈雄华/林开雄)

    目录 ... 第一章:Spring概述 IoC:BeanFactory.Context.El(SpringEL表达式) AOP:允许JVM虚拟机启动时使用代理类在运行时期修改指定类的字节码,改变一个类 ...

  3. JSP错误页面

    exception是JSP九大内置对象之一,其实例代表其他页面的异常和错误.只有当页面是错误处理页面时,即isErroePage为 true时,该对象才可以使用.对于C项,errorPage的实质就是 ...

  4. HDU 5980 Find Small A (水题)

    题意:众所周知,字符 'a' 的ASCII码为97.现在,找出给定数组中出现了多少次 'a' .注意,此处的数字为计算机中的32位整数.这表示, 1个数字由四个字符组成(一个字符由8位二进制数组成). ...

  5. Ubuntu 与 Windows 共享文件夹

    1. Ubuntu关机后 编辑虚拟机设置->option->共享文件夹->添加->确定 完成! 2.共享文件夹后在/mnt/hgfs/文件夹下无法看到共享的文件夹: 解决方法: ...

  6. 一步步教你学会browserify

    本文来自网易云社区 作者:孙圣翔 注意 文章需要边看边练习,不然你可能忘得速度比看的还快. 原文地址: http://my.oschina.net/goskyblue/blog/552284 Brow ...

  7. Yahoo Progamming Contest 2019D(DP,思维)

    #include<bits/stdc++.h>using namespace std;long long n,v,a,b,c,d,e;int main(){    scanf(" ...

  8. [转]centos7.2 下 nginx 开机启动

    1.在系统服务目录里创建nginx.service文件 vi /lib/systemd/system/nginx.service 内容如下 [Unit] Description=nginx After ...

  9. 2017-10-20 NOIP模拟赛

    Lucky Transformation #include<iostream> #include<cstring> #include<cstdio> using n ...

  10. js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装

    function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...