可视化组件——iChart.js定制

导语

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

No1.一分钟快速入门教程-Hello World

千里之行，始于足下。我们先从Hello World开始。

首先引入js文件

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

代码片段

//定义数据

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();

});

运行结果

至此，简单的入门已经完成，但是不能仅限于此，拓展下思路，如果柱状图不仅仅是单色填充，而是各式各样的图形，或者具有渐变效果的填充，该如何实现呢？

No2.定制属于自己的柱状图

首先看看我想实现的效果



再有：



查阅了ichart官方的demo和文档，未看到这方面的效果，只能自己动手，丰衣足食了。

字符串图形

首先实现一个相对简单的，绘制各种字符串。由于ichart底层是基于canvas的，所以只要拿到画笔，想画什么画什么，想画哪里画哪里。

首先运行上面的HelloWorld，单步调试，找到最终绘制的入口。

doDraw:function(_){

if(_.get('actived')){

_.drawRectangle();

}

},

这里就是最终绘制的入口，可见源码中仅仅可以绘制矩形，好单一的感觉。

修改后的这个的入口：

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();

}

}

},

默认依然绘制矩形，但是根据传入的类别，可以绘制图形的图形，如type===’exclamation’，程序会调用_.drawExclamation();方法，我们看看drawExclamation()方法的定义：

drawExclamation: function() {

var _ = this._();

var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get('border'), f_color=_.get('f_color'), shadow=_.get('shadow');

_.T.box(

_.get(_.X),

_.get(_.Y),

_.get(_.W),

_.get(_.H),

_.get('border'),

_.get('f_color'),

_.get('shadow'));

var character = _.options.character && _.options.character.value;

_.T.textStyle(_.L, 'middle', $.getFont(_.get('fontweight'), _.get('fontsize'), _.get('font')));

_.T.fillText(character, x + w/2 - _.T.measureText(character)/2, y+h/2, _.get('textwidth'), border.color);

},

代码中显示，首先绘制矩形Box，其次绘制传入的文字，这样我们的货币汇率表就很容易实现了。

阴影图形

drawSlash: function(){

var _ = this._();

var x = _.get(_.X), y = _.get(_.Y), w=_.get(_.W), h=_.get(_.H), border=_.get('border'), f_color=_.get('f_color'), shadow=_.get('shadow');

_.T.box(

_.get(_.X),

_.get(_.Y),

_.get(_.W),

_.get(_.H),

_.get('border'),

_.get('f_color'),

_.get('shadow'));

var difcount = 9;

var a = h/w, dx = parseInt(w/difcount), dy = dx * a;

for(var i = x + dx;i<= x+w; i+=dx){

var x0 = i - border.width,y0 = y + border.width;

var x1 = x + border.width, y1 = y + dy * (i-x)/dx - border.width;

_.T.line(x0,y0,x1,y1, border.width, border.color, false);

if(i !== x){

var x0 = i - border.width,y0 = y + h - border.width;

var x1 = x + w - border.width, y1 = y + dy * (i-x)/dx - border.width;

_.T.line(x0,y0,x1,y1, border.width, border.color, false);

}

}

},

效果图：



其他形状的图标类似，不再陈述。

多看看一些效果图吧：