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. shell分库备份

    分库备份企业实战题7:如何实现对MySQL数据库进行分库备份,请用脚本实现 #!/bin/bash MysqlUser=root PassWord=root Port= Socket="/u ...

  2. Flask08 包含(include)、继承(extends)、宏???、模板中变量的来源、利用bootstrap构建自己的网页结构

    1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...

  3. Java有几种引用类型?

    有这样一类对象:当内存空间还足够,则可保留在内存中:如果内存空间在gc之后还是非常紧张,则可抛弃这些对象.很多系统的缓存功能适合这样的场景,所以jdk1.2以后 java将引用分为了强引用.软引用.弱 ...

  4. R中的统计模型

    R中的统计模型 这一部分假定读者已经对统计方法,特别是回归分析和方差分析有一定的了解.后面我们还会假定读者对广义线性模型和非线性模型也有所了解.R已经很好地定义了统计模型拟合中的一些前提条件,因此我们 ...

  5. 2. Web渗透测试中常见逻辑漏洞解析与实战

    注:以下漏洞示例已由相关厂商修复,切勿非法测试! 0x01 漏洞挖掘 01  注册 注册中最常见的有两个,一个是恶意注册,另一个是账户遍历.一个好的注册界面应该是这样 或者这样的 而不是这样的 要么使 ...

  6. ubuntu-12.04.5安装cacti笔记

    坑啊,磨磨蹭蹭按了一个星期.按了3个版本. 第一次:cacti-0.8.7e.tar.gz 安装完之后,Host: Localhost->Memory Usage...四张图始终出不了.点击进去 ...

  7. NULL 与 ""

    char *str1 = NULL; //str1为空 char *str2 = ""; //str2为一个空字符串 NULL没有分配空间,""分配了空间.

  8. node安装和配置

    windows 环境 安装node node下载地址 下载后点击安装,默认下一步即可(安装路径可更改为d:盘) 检测PATH环境变量是否配置了Node.js 点击开始=>运行=>输入&qu ...

  9. 没有定义json_encode()函数。

    php5是没有json扩展的,需要自行下载. 命令php -m 可以查看安装了哪些扩展. 1.修改php.ini 在php.ini 中加入 extension=json.so:sudo vi /etc ...

  10. iOS模拟器的应用沙盒在MAC中的位置

    每个iOS应用都有自己专属的应用沙盒.分别为 应用程序包 Documents/ Library/Caches/ Library/Preferences/ tmp/ 当运行模拟时,在MAC下找到对应路径 ...