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 ...
随机推荐
- source in sight 删除工程
用十六进制编辑器打开 "我的文档/Source Insight/Projects/PROJECTS.DB3" 文件 ,找到你要删除的项目路径及名称字符串,用0替换相关位置的数据.
- .net 缓存之应用程序数据缓存
CaCheHelp类中代码如下: #region 根据键从缓存中读取保持的数据 /// <summary> /// 根据键从缓存中读取保持的数据 /// </summary> ...
- CentOS7下yum方式安装mysql5.6
在Centos7中用MariaDB代替了mysql数据库.所以在新安装MySQL前必须做好对系统的清理工作. 一.清理CentOS7下的MariaDB. [root@localhost ~]#rpm ...
- /*用户登录注册页面输入框的设置*/<span>的使用
<!DOCTYPE html> /*用户登录注册页面输入框的设置*/ <html lang="en"> <head> <meta char ...
- JQuery 1.6之后,获取属性推荐用prop
今天在做界面,要获取CheckBox的是否被选中, var ck=$("#id").attr("checked"); 但是这样取得的值是undefined, 查 ...
- eclipse 远程操作HIVE
首先启动HiveServer hive --service hiveserver 10000 & 创建工程 引入包: 代码(简单的查询): package com.hive.jdbc; imp ...
- HDU 5236 Article (概率DP+贪心)
题意:要求输入一篇N个字符的文章,对所有非负整数i:每到第i+0.1秒时可以输入一个文章字符,每到第i+0.9秒时有P的概率崩溃(回到开头或者上一个存盘点) 每到第i秒有一次机会可以选择按下X个键存盘 ...
- Spark 性能调优零散知识
1. 如果 Spark 中 CPU 的使用率不够高,可以考虑为当前的程序分配更多的 Executor, 或者增加更多的 Worker 实例来充分的使用多核的潜能 2. 适当设置 Partition 分 ...
- 清北刷题冲刺 10-31 a.m
集合 #include<iostream> #include<cstdio> #include<algorithm> using namespace std; ], ...
- Java——利用集合类实现简单斗地主发牌
import java.util.ArrayList; import java.util.Collections; import java.util.HashMap; import java.util ...