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多线程是通过线程轮流切换来实现的,所以每个线程都有一 ...
随机推荐
- linux-0.11抠代码-bootsect
//bootfun.s .global asm_message .global asm_memmove .global asm_readsector .global asm_checkLBA .cod ...
- JQuery AJAX Demo
JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...
- Python 中的用户自定义类型
Python中面向对象的技术 Python是面向对象的编程语言,自然提供了面向对象的编程方法.但要给面向对象的编程方法下一个定义,是很困难的.问题关键是理解对象 的含义.对象的含义是广泛的,它是对现实 ...
- C++ 需要返回值的函数却没有返回值的情况 单例模式
昨天在看前些天写的代码,发现一个错误. #include <iostream> using namespace std; class singleton { public: static ...
- XML文件解析之--DOM与SAX
xml文件又称‘可扩展性标记语言’,可以对文档和数据进行结构化处理,从而能够在部门.客户和供应商之间进行交换,实现动态内容生成,企业集成和应用开发. 我们在进行web开发的时候离不开xml文件,xml ...
- 有没有安全的工作?(99条评论)——结论是没有一劳永逸的工作,要终身学习,IT业刚出道和老手还是有区别的(同样对于新技术,薪资可能是个问题)
作者: 阮一峰 日期: 2015年12月15日 如果你经常使用互联网,可能知道有一种东西叫做Flash. 它是一种软件,用来制作网页游戏.动画,以及视频播放器.只要观看网络视频,基本都会用到它. 七八 ...
- c# in depth之泛型的类型约束详细
类型约束 1.引用类型约束 这种约束(表示成T:class,必须是为类型参数指定的第一个约束)用于确保使用的类型实参是引用类型,这可能是任何类,接口,数组,委托或者已知是引用类型的另一个类型参数. 例 ...
- .Net 配置文件——继承ConfigurationSection实现自己定义处理类处理自己定义配置节点
除了使用继承IConfigurationSectionHandler的方法定义处理自己定义节点的类.还能够通过继承ConfigurationSection类实现相同效果. 首先说下.Net配置文件里一 ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- TCP_NODELAY详解
在网络拥塞控制领域,我们知道有一个非常有名的算法叫做Nagle算法(Nagle algorithm),这是使用它的发明人John Nagle的名字来命名的,John Nagle在1984年首次用这个算 ...