基于HTML5 Canvas的开源图形组件-ichartjs 入门篇

淡淡的烟草味﹌ 2022-08-26 13:16 6阅读 0赞

ichartjs的官方网站为[ichartjs][]（http://www.ichartjs.com/），目前最新版本为ichartjs v1.2 Released ，ichartjs的官方介绍：

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

![特新][SouthEast]

种类：

![demo][]

入门教程：

网址：[http://www.ichartjs.com/gettingstarted/][http_www.ichartjs.com_gettingstarted]

1.构建项目环境

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

2.例子说明

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

3.预览

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

![示例][SouthEast 1]

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.相关资源

1).[Hello World源代码][Hello World]

2).[ichartjs入门简明教程v1.2.pdf][ichartjs_v1.2.pdf]

3).[在线简易图表设计器][Link 1]

接下来，对上面的代码进行修改，来学习绘图的一些方法和配置

修改代码如下：

var chart = new iChart.Column2D(\{  
animation: true,//是否启用过渡动画,false则跳过过渡动画.(默认为false)  
animation\_duration: 1500,// 指定动画持续时间，单位毫秒。此时间会与运行平台的FPS有关。(默认为1000)  
animation\_timing\_function: 'linear',//启用动画的动作函数(默认为'ease-in-out')  
background\_color: '\#f03030',//组件中背景颜色(填充色)的值  
border: \{enable: true,color: '\#5d6216',width: 1,radius: 5\},//此处设置了开启边框配置项  
color: 'red',//组件中字体颜色的值。(默认为'black')  
color\_factor: 2,//颜色因子，指示其颜色相对于背景色的变化量,值越大，变化值越大(越亮或者越暗)(默认为0.15)  
gradient: true,//True表示开启渐变效果.(默认为false)  
gradient\_mode: 'LinearGradientDownUp',//背景渐变的样式  
legend: \{enable: true,align: 'right',valign:'middle'\},//图例的配置项  
//showpercent: true,  
tip: \{enable: true,animation: true,fade\_duration: 500\},  
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();

将源代码这中的chart进行替换，效果如下图：  
![修改][SouthEast 2]  
自己也可通过注释掉配置项或修改其值进行变化，达到自己想要的效果。  
  
其他的配置可参考官方的文档和代码示例。  
  
希望各位批评指教！！！

[ichartjs]: http://www.ichartjs.com/
[SouthEast]: /images/20220824/6638336c0ef04cc491c8b20df48120e7.png
[demo]: /images/20220824/04785f3071124604a240046218b1258f.png
[http_www.ichartjs.com_gettingstarted]: http://www.ichartjs.com/gettingstarted/
[SouthEast 1]: /images/20220824/d714c81026fe4541af19a009c24d7bf5.png
[ichartjs API]: http://www.ichartjs.com/docs/zh/
[Hello World]: http://ichartjs.googlecode.com/files/helloworld-samples.zip
[ichartjs_v1.2.pdf]: http://ichartjs.googlecode.com/files/ichartjs1.2%20User%20Guide%20Simplified%20Chinese.pdf
[Link 1]: http://h5gallery.sinaapp.com/
[SouthEast 2]: /images/20220824/1c41e41ff3b84d068ef2d13fe622d281.png