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)

时间: 2024-08-04 12:03:07

HTML5线性图表 图表数据区域可着色的相关文章

java 使用 apoi 更新 ppt 中图表的数据

本文源码:    1. git clone https://github.com/zhongchengyi/zhongcy.demos.git 下的 apoi-ppt-chart 目录 2. 在第5节也有核心源码 1.    apoi简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 其中: HSSF - 提供读写Microsoft Excel格式档案的功能. XSSF - 提供读写Micro

ajax请求返回Json字符串运用highcharts数据图表展现数据

[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] [2] [2].[代码] Json字符串和highcharts数据图表展现 跳至[1] [2] 001 /* 002 * Filename: OQtyOrPriceReport.js 003 * Description:客户订单数量和价格报表分析 004 * Created: 2013.11.14 005 * Author : liangjw 006 * Company:Copyright (C) 2013

SSRS之 - 嵌套数据区域

在SSRS提供的众多控件中,最重要的控件是那些与数据集相关联的用于展示数据的控件,如表.矩阵.图形等,我们称这些可以关联到数据集的控件为数据区域(dataregion).数据区域是可以嵌套的,最常见的是在矩阵中嵌套图表.数据条.火花图等.为了了解嵌套的数据区域是如何展示数据的,我们首先必须知道嵌套数据区域设计的可见数据范围问题,我们使用矩阵作为例子. 假如数据集的结构如下,它具有4列,其中3个维度列1个度量值列: 日期 部门 产品 销售量 当我们初次将矩阵拖到界面上之后,矩阵总共有4个区域: 区

SSRS 2012 建立图表 -- 图表区属性

SSRS 2012 建立图表 -- 图表区属性 图表区是不含图例以及图表标题的图表实际显示区域.图表区属性其实是图表属性中的ChartAreas属性集合,用以定义图表的2D与3D切换,以及色彩填充的视觉效果. 其中当勾选了"3D Options"标签页的"Enable 3D".此时平面的图表会变为立体3D模式.同时设计者可以利用设置3D旋转角度.倾角度.投影模式以及背景墙厚度等属性,以达到希望的立体效果. 当勾选"Enable series cluster

SSRS 2012 建立图表 -- 图表微整形

SSRS 2012 建立图表 -- 图表微整形 许多信息人员在接触商业智能工具时,最常遇到的疑问就是设计出的报表美观程度不如预期.老实说,这实在不能够怪工具,但是大多数的信息人员又没有美工的背景知识,那该怎么办呢?没关系,再次介绍三个小秘诀,只要依照这些秘诀来设计报表,任何人都能够在最短的时间内设计出专业又美观的图表. 这三个秘诀分别是: n 尽量不要让没有提供信息的项目占掉太多空间. n 尽量多使用渐变. n 使用CustomAttributes相关属性. 首先,我们要调整的是"尽量不要让没有

JVM 运行时数据区域

Java虚拟机管理的内存包括以下几个运行时数据区域: 1.程序计数器: 程序计数器是一块比较小的内存空间,是当前线程执行的字节码行号指示器.Java多线程是通过线程轮流切换来实现的,所以每个线程都有一个自己独立的程序计数器,各个线程的程序计数器互补干扰. 2.Java虚拟机栈 Java虚拟机栈描述的是Java方法的执行模型:每个方法执行的时候都会创建一个帧栈用于存放局部变量表,操作栈,动态链接,方法出口等信息.一个方法的执行过程,就是这个方法对于帧栈的入栈出栈过程. 3.本地方法栈 本地方法栈与

JVM<一>----------运行时数据区域

参考:1.JVM Specification: http://docs.oracle.com/javase/specs/jvms/se7/html/jvms-2.html#jvms-2.5 2.<深入理解Java虚拟机> 刚开始看JVM Specification ,说实话由于专业英语不过关,有些关键词总是看不懂意思,后来参考.<深入理解Java虚拟机>方能感悟到JVM的强大. 我们就先从运行时数据区域开始 一.运行时数据区域分配图 The Java Virtual Machine

深入理解Java虚拟机:运行时数据区域

Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有些区域则依赖用户线程的启动和结束而建立和销毁.根据<Java虚拟机规范(Java SE 7版)>的规定,Java虚拟机所管理的内存将会包括以下几个运行时数据区域. 程序计数器 程序计数器(Program Counter Register)是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里

Java运行时数据区域

运行时数据区域 Java虚拟机在执行Java程序的过程中会把它管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在, 有些区域则是依赖用户线程的启动和结束而建立和销毁.如图 1.1 程序计数器 是一块内存比较小的空间.作用:用来标志当前线程所执行的字节码的行号指示器(即在字节码中添加编号).在jvm中,字节码解释器工作时就是通过改变这个计数器上的值来选取下一条需要执行的字节码指令.在分支.循环.跳转.异常处理.线程恢复等功能都需要