这是一款基于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. 《C陷阱与缺陷》整理二

    1.数组名作实參     在C语言中,我们没有办法将一个数组作为函数參数传递,假设我们使用数组名作为參数.这个时候数组名立马会被转换为指向该数组的第一个元素的指针.     关于这一点的理解能够向前深 ...

  2. 基于visual Studio2013解决面试题之0804复杂链表

     题目

  3. boost::asio 连接管理11 如何关闭连接

    在实际产品运行中,对连接管理有了更新的认识,这里分享一下. shared_ptr管理连接对象的生命周期 shared_ptr的引用计数器决定了连接对象的生命周期.这里我说的连接对象就是在我的前文:ht ...

  4. 性能测试之LoardRunner 检查点

    概述 1.检查点概念 2.实例 以下是详细介绍 检查点:首先来看一下VuGen确定脚本运行成功的判断条件.在录制编写脚本后,通常就会进行回放,如果回放通过没有错误,就认为脚本是正确的.究竟VuGen怎 ...

  5. hdu4708

    Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  6. Duanxx的C++学习: 使用类没有被定义 原因及解决方法

    今天,随着C++写的神经网络算法.我发现了一个很令人费解的问题,下面的描述一般地描述,例如: 我有两个类ClassA和ClassB,它们分别有成员变量a.b; ClassA有一个函数是这种:Funct ...

  7. UIGestureRecognizer在多层视图中的触发问题

    在一个superview中,添加了一个subview.tap一下superview,将subview隐藏起来. 在视图superview添加一个UITapGestureRecognizer对象,在UI ...

  8. Servlet的学习之Session(5)

    在上一篇中我们介绍了如果使用Session来做一个简单的用户登录案例,在本篇中我们继续使用Session技术来做一个防止表单重复提交的案例. 这是一个很重要的知识点,在很多框架中都有防止表单重复提交的 ...

  9. python httpConnection详解

    模块urllib,urllib2,httplib的区别 httplib实现了http和https的客户端协议,但是在python中,模块urllib和urllib2对httplib进行了更上层的封装. ...

  10. uva 1343 非原创

    uva1343 原作者 题目题意是:给你的棋盘,在A-H方向上可以拨动,问你最少拨动几次可以是中心图案的数字一致 解题思路:回溯法,剪枝 其中要把每次拨动的字母所代表的位置提前用数组表示: 然后在如果 ...