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多线程是通过线程轮流切换来实现的,所以每个线程都有一 ...
随机推荐
- 关于WEB三层架构的思考
1.MVC设计思想 MVC程序设计思想是眼下比較流行的WEB开发的模式,当中,M(model)是模型.即JavaBean,用来封装和保存数据:V(view)是视图,即JSP.用来显示内容:C(cont ...
- U盘安装Ubuntu kylin版
初试U盘安装Ubuntu14.04 kylin版 等待Ubuntu14.04 kylin版出来后,一直想要尝试在物理机进行安装体验,恰巧碰到五一假期,因为咱是穷人,没钱出去玩,所以就有了时间实地进行 ...
- 单选按钮、复选按钮——axure线框图部件库介绍
有时候发现这做事情坚持下来是一件很不容易的,写教程也一样,不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多,我就想想 在坚持坚持把基础部分先完善了! 1. 简单的问卷调查: 您的性别? ...
- Fedora 下安装codeblocks
首先,安装codeblocks:yum install codeblocks* -y 然后安装gcc,gdb,g++:yum install gcc gdb gcc-c++ -y 然后安装gtk的一些 ...
- boost::thread类
前言 标准C++线程即将到来.预言它将衍生自Boost线程库,现在让我们探索一下Boost线程库. 几年前,用多线程执行程序还是一件非比寻常的事.然而今天互联网应用服务程序普遍使用多线程来提高与多客户 ...
- 一点一滴完全突破KAZE特征检测算法,从各向异性扩散滤波开始(1)
ECCV2012中出现了一种比SIFT更稳定的特征检测算法KAZE.尽管,这个算法是几个法国人提出的,但是算法却有一个日文的名字.KAZE是日语‘风’的谐音,最近宣布退休的宫崎骏所拍摄的影片“起风了” ...
- 十分钟开发一个调用Activity的PhoneGap插件
在HybridApp开发中,非常多业务我们是没有办法通过HTML5+js实现的,比方调用第三方的包括Activity的jar包,一些必须使用原生代码才干实现的功能,比方复杂的UI的效果,调用通讯相关的 ...
- Eclipse使用总结
Eclipse使用总结 1.Eclipse中出现无法找到Maven包 症状:出现org.maven.ide.eclipse.MAVEN2_CLASSPATH_CONTAINER, 且出现无法找 ...
- activemq java版本要求
<pre name="code" class="html">activemq: redis01:/root# cp apache-activemq- ...
- Spark大型项目实战:电商用户行为分析大数据平台
本项目主要讲解了一套应用于互联网电商企业中,使用Java.Spark等技术开发的大数据统计分析平台,对电商网站的各种用户行为(访问行为.页面跳转行为.购物行为.广告点击行为等)进行复杂的分析.用统计分 ...