Chart.js: 一个简单的 JS Chart Library
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的更多相关文章
- 创建node.js一个简单的应用实例
在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...
- 一个简单的js面试题
在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求 给一个数组的最后 ...
- 一个简单的JS倒计时
看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时) ...
- 一个简单的 js 时间对象创建
JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date(); //创建一个时间对象 myDate.g ...
- three.js一个简单demo学些和讲解
叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...
- 一个简单的JS日期挂历脚本
分享一个JS脚本做的日期挂历,在需要的时候可以引入你的程序. 如需单独引入这个脚本,请将它保存在一个文件中然后引入它:如这样 <script type="text/javascript ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- isMobile 一个简单的JS库,用来检测移动设备
点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...
- 一个简单的js时钟
演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...
随机推荐
- CUDA计时
from:http://blog.sina.com.cn/s/blog_45209f340101341e.html <1>使用cutil.h中的函数 unsigned int timer= ...
- Spring 3.x 企业引用开发实战(陈雄华/林开雄)
目录 ... 第一章:Spring概述 IoC:BeanFactory.Context.El(SpringEL表达式) AOP:允许JVM虚拟机启动时使用代理类在运行时期修改指定类的字节码,改变一个类 ...
- JSP错误页面
exception是JSP九大内置对象之一,其实例代表其他页面的异常和错误.只有当页面是错误处理页面时,即isErroePage为 true时,该对象才可以使用.对于C项,errorPage的实质就是 ...
- HDU 5980 Find Small A (水题)
题意:众所周知,字符 'a' 的ASCII码为97.现在,找出给定数组中出现了多少次 'a' .注意,此处的数字为计算机中的32位整数.这表示, 1个数字由四个字符组成(一个字符由8位二进制数组成). ...
- Ubuntu 与 Windows 共享文件夹
1. Ubuntu关机后 编辑虚拟机设置->option->共享文件夹->添加->确定 完成! 2.共享文件夹后在/mnt/hgfs/文件夹下无法看到共享的文件夹: 解决方法: ...
- 一步步教你学会browserify
本文来自网易云社区 作者:孙圣翔 注意 文章需要边看边练习,不然你可能忘得速度比看的还快. 原文地址: http://my.oschina.net/goskyblue/blog/552284 Brow ...
- Yahoo Progamming Contest 2019D(DP,思维)
#include<bits/stdc++.h>using namespace std;long long n,v,a,b,c,d,e;int main(){ scanf(" ...
- [转]centos7.2 下 nginx 开机启动
1.在系统服务目录里创建nginx.service文件 vi /lib/systemd/system/nginx.service 内容如下 [Unit] Description=nginx After ...
- 2017-10-20 NOIP模拟赛
Lucky Transformation #include<iostream> #include<cstring> #include<cstdio> using n ...
- js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...