这是一款基于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. JVM类加载过程学习总结

    JVM类加载过程学习总结 先不说JVM类加载的原理,先看实例: NormalTest类,包含了一个静态代码块,执行的任务就是打印一句话. /** * 在正常类加载条件下,看静态代码块是否会执行 * @ ...

  2. android HorizontalListView

    最近搞android 用到一个HorizontalListView 网上搜了一把.有一些国人实现的.但也有一些基本上是cp人家的开源项目. 本人找了两个.记录一下. 其一:https://github ...

  3. [置顶] 浅谈Android的资源编译过程

    Android APK 一.APK的结构以及生成 APK是Android Package的缩写,即Android application package文件或Android安装包.每个要安装到Andr ...

  4. 聊天气泡的绘制(圆角矩形+三角形+黑色边框,关键学会QPainter的draw函数就行了),注意每个QLabel都有自己的独立坐标

    头文件: #ifndef GLABEL_H #define GLABEL_H #include <QLabel> #include <QPainter> #include &l ...

  5. Windows 和 Linux下使用socket下载网页页面内容(可设置接收/发送超时)的代码

    主要难点在于设置recv()与send()的超时时间,具体要注意的事项,请看代码注释部分,下面是代码: #include <stdio.h> #include <sys/types. ...

  6. Codeforces Round #311 (Div. 2)

    我仅仅想说还好我没有放弃,还好我坚持下来了. 最终变成蓝名了,或许这对非常多人来说并不算什么.可是对于一个打了这么多场才好不easy加分的人来说,我真的有点激动. 心脏的难受或许有点是由于晚上做题时太 ...

  7. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

    Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...

  8. DBA日常管理——数据归档(Archiving-Data)

    原文出处:http://www.sqlnotes.cn/post/2013/09/05/DBA-Daily-Jobs-One%E2%80%94%E2%80%94-Archiving-Data 均为本人 ...

  9. CSS样式渐变写法

    .first_tree li:hover{ color:#FFF; cursor:pointer; background-color:#ff8a00; background: -ms-linear-g ...

  10. ext4 delalloc相关

    ext4文件系统delayed allocation相关研究 最近在一个项目上测试录音时,发现有丢数据的现象.通过串口发现打出了很多overrun的log. overrun是驱动层给上层应用的一个通知 ...