本文摘自PHP中文网,作者PHPzhong,侵删。
导语
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
No1.一分钟快速入门教程-Hello World
千里之行,始于足下。我们先从Hello World开始。
首先引入js文件
1 | <script type= "text/javascript" src= "ichart.1.2.min.js" ></script>
|
代码片段
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $( function (){
var chart = new iChart.Column2D({
render : 'canvasp' ,
data: data,
title : 'Hello World\'s Height In Alphabet' ,
width : 800,
height : 400,
shadow:true,
shadow_color: '#c7c7c7' ,
coordinate:{
scale:[{
position: 'left' ,
start_scale:0,
end_scale:26,
scale_space:2,
listeners:{
parseText: function (t,x,y){
return {text:t+ " cm" }
}
}
}]
}
|
运行结果
至此,简单的入门已经完成,但是不能仅限于此,拓展下思路,如果柱状图不仅仅是单色填充,而是各式各样的图形,或者具有渐变效果的填充,该如何实现呢?
No2.定制属于自己的柱状图
首先看看我想实现的效果
再有:
查阅了ichart官方的demo和文档,未看到这方面的效果,只能自己动手,丰衣足食了。
字符串图形
首先实现一个相对简单的,绘制各种字符串。由于ichart底层是基于canvas的,所以只要拿到画笔,想画什么画什么,想画哪里画哪里。
首先运行上面的HelloWorld,单步调试,找到最终绘制的入口。
1 2 3 4 5 | doDraw: function (_){
if (_.get( 'actived' )){
_.drawRectangle();
}
},
|
这里就是最终绘制的入口,可见源码中仅仅可以绘制矩形,好单一的感觉。
修改后的这个的入口:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | doDraw: function (_){
if (_.get( 'actived' )){
var _ = this._();
var type = _.options.type;
if (type === 'slash' ){
_.drawSlash();
} else if (type === 'innerRect' ){
_.drawInnerRect();
} else if (type === 'wire' ){
_.drawWire();
} else if (type === 'star' ){
_.drawStar();
} else if (type === 'exclamation' ){
_.drawExclamation();
} else if (type === 'innerRectAndLine' ){
_.drawInnerRectAndLine();
} else if (type === 'judge' ){
_.drawJudge();
} else {
_.drawRectangle();
}
}
},
|
阅读剩余部分
相关阅读 >>
一定要注意常见的3种HTML5错误用法
HTML5 中的一些有趣的新特性
怎样用h5计算手机摇动次数
HTML5 canvas如何绘制圆形?(代码实例)
HTML5编程实战之三-图片文本(txt)拖拽预览实现代码
h5中视频与音频标签和进度条如何使用
HTML5+nodejs实现websocket即时通讯的示例代码分享
HTML5包含css3吗
h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
怎样做出h5响应式网页设计
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » iChart-组件定制图形库图表/报表开发教程