基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
来源:互联网 发布:购买淘宝买家的手机号 编辑:程序博客网 时间:2024/05/16 07:41
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协议的开源项目。
种类:
入门教程:
网址:http://www.ichartjs.com/gettingstarted/
由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境。代码如下:
<script type="text/javascript" src="ichart.1.2.min.js"></script>
我们利用2D柱形图来展示Hello World的各个字母在字母表中的位置的情况。我们将位置抽象为其高度。来以我们的方式来展示一个不一样的Hello World。
我们先来看下例子最后的预览图,以便使你读起来没有那么乏味。如下图:
//定义数据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的IDdata: data,//绑定数据title : 'Hello World\'s Height In Alphabet',//设置标题width : 800,//设置宽度,默认单位为pxheight : 400,//设置高度,默认单位为pxshadow: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>
本教程作为快速入门的向导,在本文档中所用到的配置属性,并不是图表中的全部属性,要配合ichartjs API进行阅读可以达到事半功倍的效果。阅读完本教程可以基本掌握ichartjs的大致功能以及使用方式,要想达到随心所欲的境界还是要多多进行实例练习,组件中提供了大量的实例是学习ichartjs好的途径。
1).Hello World源代码
2).ichartjs入门简明教程v1.2.pdf
3).在线简易图表设计器
接下来,对上面的代码进行修改,来学习绘图的一些方法和配置修改代码如下:
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();
自己也可通过注释掉配置项或修改其值进行变化,达到自己想要的效果。
其他的配置可参考官方的文档和代码示例。
希望各位批评指教!!!
- 基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
- 对ichartjs基于基于HTML5的开源图形组件画图的心得
- 对ichartjs基于基于HTML5的开源图形组件画图的心得
- 基于HTML5的开源图形报表组件
- 基于HTML5的开源图形组件学习
- 基于HTML5的ichartjs图表组件在Android应用中的使用
- 移动中”的HTML5-开源图表库ichartjs-王鹤
- echarts(国产)基于html5-canvas的开源图表绘制组件
- html5可视化图形编辑器(基于canvas)
- 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
- 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图
- 采用HTML5的开源组件绘制复杂图形
- HTML5之Canvas 2D入门2 - Canvas绘制图形
- 国内一款优秀的开源HTML5图表绘制框架-ichartjs
- 介绍一款使用html5画图的JS开源软件ichartjs
- HTML5图表利器-ichartjs开源图表库
- 基于HTML5 Canvas的引擎
- Android报表解决方案 使用开源组件iChartjs(一)
- 关于CrtmpServer中的RTMP协议头处理
- MPI编程->环境配置
- Windows下本地RabbitMQ服务的安装(V3.01)
- LoadRunner牛刀小试2--实用小TIPs
- cocos2dx之Http网络编程(一)——网络请求的发送和接收
- 基于HTML5 Canvas的开源图形组件-ichartjs 入门篇
- <Win32_1>深入浅出windows消息机制
- C++STL的备忘
- HD-小数化分数2
- C++primer plus第六版课后编程题答案 7.7
- 26款开源JavaScript库和框架
- APUE 1-3
- APUE 1-4
- If so disable them, since they are a common source of problems.Furthermore run the following command