这是一款基于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. 华为手机logcat不出日志解决方案

    解决方法:在拨打电话界面,录入*#*#2846579#*#* 自动进入开发界面菜单,进入第一个,选择开启logcat.

  2. SharePoint2010 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV4

    在SharePoint2010开发中,选择部署类型为“部署为沙盒解决方案”,在部署代码是出现如下错误提示: 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV ...

  3. HTML&JS笔记(1)

    canvas基本绘图 <!DOCTYPE html> <html> <body> <meta charset="utf-8"> &l ...

  4. (08)DBA写给开发的索引经验

          索引可是个大事情,翻开任意一本数据库调优的书,索引都会占到比较大的篇幅.这是个人人都很重视的问题,可往往起始阶段还好,但数据库到最后常常还是会陷入由索引起的性能怪圈中.特别是在上线运行过一 ...

  5. 64位win7旗舰版搭建apache+php+mysql开发环境[转]

      我建议把apache.php.mysql都安装在一个文件夹中,比如:web/apache.web/php.web/mysql 1.安装apache2.2.25,请查看win7下安装VC9版本的ap ...

  6. grails一对一关联关系

    一对一关联关系开发中用的没有一对多那么广泛.可是我认为掌握以下还是有必要的.一对一关联关系有一张表存在外键,引用的通常是主表的主键.grails也对一对一关联关系提供了非常好的支持.配置也是简单的不得 ...

  7. 使用datapump 导出导入同义词(export and import synonym using datapump)

    对于同义词的备份我们有多种方式来实现,如直接通过脚本生成同义词的创建脚本,或者使用dbms_metadata.get_ddl来提取同义词的定义脚本.然而在使用传统的exp或是datapump expd ...

  8. 奇葩的UI引用LayoutInflater.from问题

    今收到BUG一枚,一个页面的EditText的风格变为了系统默认(系统经过定制,风格和普通的不同) 经检查xml无任何不妥,最终问题出在LayoutInflater.from上. 如果LayoutIn ...

  9. Python 学习入门(22)—— 线程同步

    Python主要通过标准库中的threading包来实现多线程.在当今网络时代,每个服务器都会接收到大量的请求.服务器可以利用多线程的方式来处理这些请求,以提高对网络端口的读写效率.Python是一种 ...

  10. SilkTest Q&A 9

    Q81:我应该如何存取excel sheet里面的空字符串? A81:定制代码如下: 解决方案1: [-] if sText!=NULL [ ] Page.tfldName.SetText(sText ...