这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果。







在线演示:
点击演示

源代码下载:

点击下载



核心jQuery代码:

var myData = {

  labels : ["Mo","Di","Mi","Do","Fr","Sa","So"],

  datasets : [

    {

      fillColor : "rgba(220,220,220,.5)",

      strokeColor : "rgba(220,220,220,1)",

      pointColor : "rgba(220,220,220,1)",

      pointStrokeColor : "#fff",

      data : [65,59,90,81,56,55,40]

    },

    {

      fillColor : "rgba(90,190,90,.5)",

      strokeColor : "rgba(90,190,90,1)",

      pointColor : "rgba(90,190,90,1)",

      pointStrokeColor : "#fff",

      data : [40,48,40,40,90,27,90]

    }

  ]

}





new Chart(document.getElementById("canvas").getContext("2d")).Line(myData)

HTML5线性图表 图表数据区域可着色的更多相关文章

  1. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

  2. java 使用 apoi 更新 ppt 中图表的数据

    本文源码:    1. https://github.com/zhongchengyi/zhongcy.demos/tree/master/apoi-ppt-chart 2. 在第5节也有核心源码 1 ...

  3. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  4. iNeuOS工业互联平台,图表与数据点组合成新组件,进行项目复用

    目       录 1.      概述... 1 2.      演示信息... 2 3.      应用过程... 2 1.   概述 针对有些行业的数据已经形成了标准化的建模或者有些公司专注于某 ...

  5. echarts数据区域缩放(鼠标滚轮、滚动条、拉选框)

    当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...

  6. OpenCV支持向量机SVM对线性不可分数据的处理

    支持向量机对线性不可分数据的处理 目标 本文档尝试解答如下问题: 在训练数据线性不可分时,如何定义此情形下支持向量机的最优化问题. 如何设置 CvSVMParams 中的参数来解决此类问题. 动机 为 ...

  7. java的运行时数据区域

    最近在看<深入理解Java虚拟机>,书中给了几个例子,比较好的说明了几种OOM(OutOfMemory)产生的过程,大部分的程序员在写程序时不会太关注Java运行时数据区域的结构: 1.程 ...

  8. JVM学习笔记:Java运行时数据区域

    JVM执行Java程序的过程中,会使用到各种数据区域,这些区域有各自的用途.创建和销毁时间.根据<Java虚拟机规范>,JVM包括下列几个运行时数据区域,如下图所示: 其中红色部分是线程私 ...

  9. JVM 运行时数据区域

    Java虚拟机管理的内存包括以下几个运行时数据区域: 1.程序计数器: 程序计数器是一块比较小的内存空间,是当前线程执行的字节码行号指示器.Java多线程是通过线程轮流切换来实现的,所以每个线程都有一 ...

随机推荐

  1. inner join、left join、right join中where和and的作用

    inner join.left join.right join中where和and的作用 .内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括  (1)左外连接 (左边的 ...

  2. 用python -i写交互式shell

    cabinet是公司的一个数据存储服务,需要添加一个shell client,查看数据,做简单操作. 用python写了一个比想象的简单.代码如下: #! /usr/bin/python -i # c ...

  3. 高性能MySql进化论(四):Summary,Cache,Counter表的使用

    在实际的应用中,往往会定期的对一个周期内的系统数据进行统计分析.例如某购物网站定期的统计商品在一个月/年期内的销售情况,如果采用扫描所有相关表的方式在某个时间点进行统计分析, 由于数据量很大,以及表结 ...

  4. Microsoft Visual Studio International Pack 1.0 SR1--关于汉字转拼音

    Microsoft Visual Studio International Pack 1.0 SR1————微软的一个类库 地址:http://www.microsoft.com/zh-cn/down ...

  5. DataTable的一些使用技巧

    在做机房的时候经常用到DataTable,发现如果DataTable使用的好的话,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果.现在对我知道的一些技巧做个总结,虽然都是一些简单的,但是发 ...

  6. jsp和serverlet的差别

    開始找工作面试的第一家公司,爱思创新 面试题: 1.jsp和serverlet的差别 简单来说: jsp:是包括java程序片的html文件servlet:是包括html的java文件 事实上说白了J ...

  7. catalan 数——卡特兰数(转)

    Catalan数——卡特兰数 今天阿里淘宝笔试中碰到两道组合数学题,感觉非常亲切,但是笔试中失踪推导不出来后来查了下,原来是Catalan数.悲剧啊,现在整理一下 一.Catalan数的定义令h(1) ...

  8. 让notepad.exe的utf8不添加BOM

    实在是厌烦了notepad的utf8模式了,于是决定修改之,方案如下: 使用任何支持hex模式的编辑器打开%SystemRoot%/system32/notepad.exe查找二进制串56 8D 45 ...

  9. hdu 4708 Rotation Lock Puzzle 2013年ICPC热身赛A题 旋转矩阵

    题意:给出一个n*n的矩阵,旋转每一圈数字,求出对角线可能的最大值,以及转到最大时的最小距离. 只要分析每一层就可以了,本来想用地址传递二维数组,发现行不通,改了一下就行了. 这里有个坑,比如: 1 ...

  10. Unity3D-深入剖析NGUI的游戏UI架构

    Unity3D-NGUI分析,使用NGUI做UI须要注意的几个要点在此我想罗列一下,对我在U3D上做UI的一些总结,最后解剖一下NGUI的源码.它是假设架构和运作的. 在此前我介绍了自己项目的架构方式 ...