HTML5线性图表 图表数据区域可着色
这是一款基于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线性图表 图表数据区域可着色的更多相关文章
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
- java 使用 apoi 更新 ppt 中图表的数据
本文源码: 1. https://github.com/zhongchengyi/zhongcy.demos/tree/master/apoi-ppt-chart 2. 在第5节也有核心源码 1 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- iNeuOS工业互联平台,图表与数据点组合成新组件,进行项目复用
目 录 1. 概述... 1 2. 演示信息... 2 3. 应用过程... 2 1. 概述 针对有些行业的数据已经形成了标准化的建模或者有些公司专注于某 ...
- echarts数据区域缩放(鼠标滚轮、滚动条、拉选框)
当一个echarts图表上的数据很多时,想要查看部分区域的数据状态,可以通过数据区域缩放来实现,现总结三个方法: 鼠标滚轮缩放: var arr = []; for(var i = 0;i<15 ...
- OpenCV支持向量机SVM对线性不可分数据的处理
支持向量机对线性不可分数据的处理 目标 本文档尝试解答如下问题: 在训练数据线性不可分时,如何定义此情形下支持向量机的最优化问题. 如何设置 CvSVMParams 中的参数来解决此类问题. 动机 为 ...
- java的运行时数据区域
最近在看<深入理解Java虚拟机>,书中给了几个例子,比较好的说明了几种OOM(OutOfMemory)产生的过程,大部分的程序员在写程序时不会太关注Java运行时数据区域的结构: 1.程 ...
- JVM学习笔记:Java运行时数据区域
JVM执行Java程序的过程中,会使用到各种数据区域,这些区域有各自的用途.创建和销毁时间.根据<Java虚拟机规范>,JVM包括下列几个运行时数据区域,如下图所示: 其中红色部分是线程私 ...
- JVM 运行时数据区域
Java虚拟机管理的内存包括以下几个运行时数据区域: 1.程序计数器: 程序计数器是一块比较小的内存空间,是当前线程执行的字节码行号指示器.Java多线程是通过线程轮流切换来实现的,所以每个线程都有一 ...
随机推荐
- EasyUI - DataGrid 组建 - [ 组件加载和分页 ]
效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...
- 将Qt 动态链接生成的exe及依赖dll打包方法
源地址:http://blog.csdn.net/ztz0223/article/details/8939341 将Qt 动态链接生成的exe及依赖dll打包方法 原文:http://www.qtcn ...
- Spring3表达式语言(SpEL)学习笔记
最新地址请访问:http://leeyee.github.io/blog/2011/06/19/spring-expression-language Spring Excpression Langua ...
- CentOS6.4 安装 Oracle11g
1.硬件要求检查: 1.1 内存要求: 内存大于1G(使用虚拟机安装时内存要稍微大一些,否则安装检查不通过) #cat /proc/meminfo //查看内存大小 1.2 交换分区要求: 交换分区是 ...
- cocos2d-x游戏开发系列教程-坦克大战游戏启动界面的编写
用前面介绍的方法,创建一个cocos2d-x项目,可以看到新项目内容如下图:
- javascript 学习资料网址一览
1.http://www.runoob.com/ 2.https://developer.mozilla.org/zh-CN/ 3.http://www.imooc.com/ 视频类
- iOS学习——ViewController(六)
ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图. iOS的SDK中提供很多原生ViewControlle ...
- Java面试宝典2014版
一. Java基础部分......................................................................................... ...
- 使用hadoop ecipse插件须要注意的问题
1.关于run on hadoop的问题: 在未用hadoop eclipse插件前,我以为通过hadoop eclipse 插件不但能够管理hdfs,还能够自己主动打包程序.并帮我自己主动设置Con ...
- ABAP 向上取整和向下取整 CEIL & FLOOR
下面是一段关于CEIL 和 FLOOR 的代码 DATA:a TYPE mseg-menge, b TYPE mseg-menge, c TYPE mseg-menge. a = '1.36'. b ...