这是一款基于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. 解 自己关于 C# Button的Click事件的疑惑

    先说说C#中事件的用法,从事件的用法中,我自己会产生一个疑惑 C#事件 class Program { static void Main(string[] args) { EventClass ec ...

  2. (升级版)Spark从入门到精通(Scala编程、案例实战、高级特性、Spark内核源码剖析、Hadoop高端)

    本课程主要讲解目前大数据领域最热门.最火爆.最有前景的技术——Spark.在本课程中,会从浅入深,基于大量案例实战,深度剖析和讲解Spark,并且会包含完全从企业真实复杂业务需求中抽取出的案例实战.课 ...

  3. [置顶] C++之TinyXML的使用介绍

    一.引子: 最近在做GBT28181国标平台对接的工作,涉及到一些进程间消息通讯,消息体有xml格式,之前测试的时候都是拿他们当做字符串去解析,现在正儿八经地开发的时候,就想到了用xml库去解析,由于 ...

  4. unix ourhdr.h myerr.h

    //在学UNIX环境高级编程时把下面两个头文件与源文件放在同一个文件下就可以正常编译了,我的是在ubuntu 12.04环境下,第一个程序编译和运行成功了,希望对大家有帮助(我已经根据网上的资料修改好 ...

  5. PreTranslateMessage和TranslateMessage区别

    PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用,当需要在MFC之前处理某些消息时,常常要在这里添加代码. ...

  6. delphi 利用HTTP的POST方法做个在线翻译的小工具 good

    最近做了一个英汉小翻译的东东,用的是VC,ADO + Access访问数据库,单词数据库是从金山打字通2002弄来的.后来想了想,想再加个在线翻译的功能,记得经常使用GOOGLE翻译网站的在线翻译,也 ...

  7. 基于visual Studio2013解决面试题之0210树的最远距离

     题目

  8. ubuntu环境ceph配置入门(一)

    环境:ubuntu server 14.04 64bit,安装ceph版本号0.79 正常情况下应有多个主机,这里为了高速入门以一台主机为例,多台主机配置方式类似. 1. 配置静态IP及主机名 静态I ...

  9. Qt+gsoap调用WebService

    1.       前言 Qt本身给我们提供了调用WebService的解决方案qsoap,看了一下他的介绍,感觉实在是太弱了,而且又是个新出的东西,所以还是决定不用他.既然使用Qt,那当然是跨平台的解 ...

  10. SetFocus、SetCapture和SetActiveView的区别

    1. SetActiveView是MFC框架内的一个函数, 而不是SDK中的函数, 也就是说SDK中没有ActiveView这个概念, 只有在MFC中才有2. SetFocus是SDK中的函数(当然M ...