1.构建项目环境

由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境。代码如下:

<script type="text/javascript" src="ichart.1.2.min.js"></script>

2.例子说明

我们利用2D柱形图来展示Hello World的各个字母在字母表中的位置的情况。我们将位置抽象为其高度。来以我们的方式来展示一个不一样的Hello World。

3.预览

我们先来看下例子最后的预览图,以便使你读起来没有那么乏味。如下图:

4.代码说明

	//定义数据
var data = [
{name : 'H',value : 7,color:'#a5c2d5'},
{name : 'E',value : 5,color:'#cbab4f'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'O',value : 15,color:'#a56f8f'},
{name : 'W',value : 13,color:'#c12c44'},
{name : 'O',value : 15,color:'#a56f8f'},
{name : 'R',value : 18,color:'#9f7961'},
{name : 'L',value : 12,color:'#76a871'},
{name : 'D',value : 4,color:'#6f83a5'}
];
$(function(){
var chart = new iChart.Column2D({
render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
data: data,//绑定数据
title : 'Hello World\'s Height In Alphabet',//设置标题
width : 800,//设置宽度,默认单位为px
height : 400,//设置高度,默认单位为px
shadow:true,//激活阴影
shadow_color:'#c7c7c7',//设置阴影颜色
coordinate:{//配置自定义坐标轴
scale:[{//配置自定义值轴
position:'left',//配置左值轴
start_scale:0,//设置开始刻度为0
end_scale:26,//设置结束刻度为26
scale_space:2,//设置刻度间距
listeners:{//配置事件
parseText:function(t,x,y){//设置解析值轴文本
return {text:t+" cm"}
}
}
}]
}
});
//调用绘图方法开始绘图
chart.draw();
}); //Html代码
<div id='canvasDiv'></div>

5.结束语

本教程作为快速入门的向导,在本文档中所用到的配置属性,并不是图表中的全部属性,要配合ichartjs API进行阅读可以达到事半功倍的效果。阅读完本教程可以基本掌握ichartjs的大致功能以及使用方式,要想达到随心所欲的境界还是要多多进行实例练习,组件中提供了大量的实例是学习ichartjs好的途径。

6.相关资源

在线简易图表设计器

ichartjs开源图表组件示例中心

Ichartjs文档说明和图表库简介

Ichartjs文档说明

ichartjs一分钟快速入门教程的更多相关文章

  1. 论文神器Latex30分钟快速入门教程-只需9步向学神看齐

    小E说:工欲善其事,必先利其器.立志做个安静的美学霸的你,学会Latex,一定能使你的论文写作事半功倍. 1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译 ...

  2. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  3. 专为设计师而写的GitHub快速入门教程

    专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li     原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...

  4. 转:几十种编程语言的快速入门教程- learnxinyminutes.com

    原文来自于:http://top.jobbole.com/15551/ 这家网站的名称是 Learn X in Y minutes,包括了几十种编程语言的快速学习入门教程.打开几种编程语言来看了一下, ...

  5. 21分钟 MySQL 入门教程(转载!!!)

    21分钟 MySQL 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数 ...

  6. EntityFramework6 快速入门教程

    EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...

  7. Apple Watch开发快速入门教程

     Apple Watch开发快速入门教程  试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...

  8. 指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程

    指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程 1.4.2  指示灯组 指示灯组的放大图如图1.5所示. 图1.5  指示灯组 各个指示灯对应的功能如下: q  RX:对应于0号端口, ...

  9. 游戏控制杆OUYA游戏开发快速入门教程

    游戏控制杆OUYA游戏开发快速入门教程 1.2.2  游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4  游戏控制杆各个角度的 ...

随机推荐

  1. BZOJ3718[PA2014]Parking——树状数组

    题目描述 你的老板命令你将停车场里的车移动成他想要的样子.停车场是一个长条矩形,宽度为w.我们以其左下角顶点为原点,坐标轴平行于矩形的边,建立直角坐标系.停车场很长,我们可以认为它一直向右边伸展到无穷 ...

  2. VMware配置Linux中APPache服务器

    [软件] VMware    SecureCRT [镜像文件] Centos6.8   APPache软件包 [步骤] 1.将所需文件通过SCRT传入到虚拟机中 2.挂载镜像 2.1 将镜像挂载到mn ...

  3. ef group 封装

    表达式树,传递 group public class Test<T> where T : class { MoviesEntities db = new MoviesEntities(); ...

  4. ROADS POJ - 1724(分层最短路)

    就是在最短路的基础上   多加了一个时间的限制 , 多一个限制多一维就好了  记住 分层最短路要用dijistra !!! #include <iostream> #include < ...

  5. 遍历List、Map删除元素

    遍历List删除元素 方法一: List<String> list = new ArrayList<>(); list.add("1"); list.add ...

  6. MT【11】对数放缩题

    解答:C 评论:这里讲几个背景知识

  7. 04 自学Aruba之定制AC的protal认证登陆页面

    点击返回:自学Aruba之路 04 自学Aruba之定制AC的protal认证登陆页面 方法一: 使用Aruba控制器中内置的网页界面 Configuration下MANAGEMENT>Capt ...

  8. luogu1966 火柴排队(离散化+树状数组)

    由于是一个二次函数的关系,所以易证应该尽量让两组的顺序相同 然后就离散化乱搞几发,最后就变成了求逆序对的数量了 #include<bits/stdc++.h> #define pa pai ...

  9. Raspbian开启root账户

    启用root账户 使用默认用户pi,密码raspberry登录树莓派 sudo passwd root #给root账户设置密码 sudo passws --unlock root #解除root账户 ...

  10. CF 991

    843名... 正规比赛肯定要掉分了...... 就算C没WA也是765名...为什么会这么菜呢? A,水.我加了两个特判. B,水.以 n * 4.5 为目标即可. C,裸二分,可耻的WA了一次是为 ...