矢量Chart图表嵌入HTML5

1矢量Chart图表嵌入HTML5使用HTforWeb(以下简称HT)开发HTML5网络拓扑图的开发有Chart需求的项目的时候，感觉很痛苦，HT集成的Chart组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案，接下来我们就来聊聊具体的解决方案。2首先，第一种解决方案是，在定义Chart矢量的时候在comps中除了定义Chart外，再添加几个你自定义的绘制区域来绘制你想要的坐标轴，效果及example如下：该Chart的定义代码见附录1(代码的定义太长)，代码虽然长，但是代码的逻辑并不乱，各个模块间的矢量描述还是比较清晰的，具体可以参考HT的矢量手册，看到如此长的代码，我自己都没信心去维护它，维护这样的代码纯粹是体力活，而且复用性也不高，每一个不同的Chart都要类似如此地绘制，绘制一两个这样的图表感觉还好，绘制多了，真心会感觉很恶心，再这上面很浪费时间。其次，第二种解决方案是，通过数据绑定来自定义绘制坐标轴。实现以上相同效果，其代码见附录2。可以明显看出其代码量会比第一种解决方案好很多，而且代码可以复用。在其他的图表中，可以将横轴和纵轴的文本内容设置到data的attr属性上，并在定义chart时使用上如下代码就可以实现坐标文本的效果：ht.Default.setImage('chartName',{width:Number,3height:Number,comps:[{//definechart},{type:'xAxis',rect:Array},{type:'yAxis',rect:Array}]});在这里我已经通过ht.Default.setCompType('typeName',function(g,rect,comp,data,view){})的方法定义了名字为xAxis和yAxis的CompType，这两个CompType分别绘制了横轴和纵轴的坐标文本，代替了第一种方案制定多个CompType为text的写法，稍微优化了下代码，提高代码的可维护性。但是，这样但使用方法总刚觉有些别扭，明明坐标轴是Chart的一部分，在定义Chart上却要硬生生地将图表和坐标部分分开，那如果用户还要在定义标题、坐标刻度、坐标说明等需求，那这个方案还是无法爽快的解决大部分通用的需求，需要定义许多CompType来渲染不同的需求，而且在使用上也不是那么爽快。接下来要说明的方案三，就是来解决使用上及维护上的问题。最后，第三种解决方案是，和第二种解决方案差不多，都是通过ht.Default.setCompType('typeName',function(g,rect,comp,data,view){})的方法来定义名字为axisChart的CompType，不同的是，数据并不是设置到data中，而是在ht.Default.setImage()的comps中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件，使用方式很简单，在引入ht.js核心文件的前提下，引入附件的axisChart.js文件即可。接下来来看下axisChart的具体使用及几个简单的例子：例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：4代码如下：ht.Default.setImage('c1',{width:600,height:400,comps:[{type:'axisChart',rect:[0,0,600,400],yAxis:[{name:'单位：V',max:270,min:150,splitNumber:10,axisTitle:{text:'电压',rotate:-90},axisLine:{5arrow:true}},{position:'right',name:'单位：I',max:20,splitNumber:20,axisTitle:{text:'电流',rotate:90},axisLabel:{interval:1},axisLine:{arrow:true}}],xAxis:[{type:'category',data:['抚梅源','藕花深处','紫东花园','紫金苑','华府山水','水云间','瑞景新城'],axisTitle:{text:'小区名称'}}],series:[{label:function(value){returnvalue+'V';},data:{values:[220,210,200,209,230,215,218],color:'#f90'}},{yAxisPosition:'right',label:true,data:{values:[10,4,15,9,12,18,7],color:'#af0'}}]}]});例2:不同时刻，不同小区的电压情况的折线图：6代码如下：ht.Default.setImage('c2',{width:600,height:400,comps:[{type:'axisChart',rect:[0,0,600,400],yAxis:[{name:'单位：V',max:240,min:190,splitNumber:10,axisTitle:{text:'电压',rotate:-90},axisLine:{arrow:true7}}],xAxis:[{type:'time',min:newDate(2015,0,1),max:newDate(2015,0,2),splitNumber:25,axisTitle:{text:'时间'},axisLabel:{interval:2,formatter:function(value,index,min,max){returnvalue.format('dd-hh');}},axisLine:{arrow:true}}],series:[{type:'line',data:{values:[220,210,200,209,230,215,218,220,210,200,209,230,215,218,209,230,215,218,220,210,200,209,230,215,218],color:'#f90'}},{type:'line',data:{values:[225,209,208,206,205,221,213,224,218,224,205,208,216,220,208,210,219,219,210,209,219,207,222,222,215],color:'#7d0'}},{type:'line',linePoint:true,line3d:true,data:{values:[211,216,215,205,206,206,223,217,217,215,212,221,219,222,205,208,205,218,223,222,207,215,215,222,223],color:'#ab0'}}]}]});8最后，还有一点要说明，axisChart的代码并不是那么的无懈可击，我个人觉得代码设计上还是有些欠缺，所有的代码总共有差不多1000行，我觉得太臃肿了，在设计上自己也感觉不是那么的友好，等想修改的时候发现已经投入太多时间了，还有好多事情等待着我我去学习、去探讨，所以也就线这样吧，等有空了再重构一番，但是我相信在功能上还是能够满足大部分的需求，在设计上，或者是实现的方法上，还是在使用过程中发现的bug，还望大家能够不吝赐教。附录1ht.Default.setImage('chart',{width:650,height:380,comps:[//columnchart{type:'columnChart',rect:[10,60,630,260],label:true,labelColor:'#20284C',labelFont:'8pxArial',series:[{color:'#20284C',values:[471,482,567,525,590,637,780,679,848]},{color:'#303F74',values:[275,290,361,328,346,341,440,423,505]},{color:'#7E93CD',values:[82,104,115,118,135,154,198,197,247]},{color:'#A9B6DB',values:[65,78,87,87,113,130,167,159,213]}]},//竖线{type:'rect',rect:[15,60,1,260],background:'#566CB0'},{type:'shape',rect:[5.5,30,20,30],borderWidth:1,9borderColor:'#566CB0',points:[0,20/3*2,20/2,0,20,20/3*2,20/2,0,20/2,30],segments:[1,2,2,1,2]},//坐标文本{type:'text',rect:[0,320-26*10-8,15,16],align:'right',text:Math.round(84.8*10)},{type:'text',rect:[0,320-26*9-8,15,16],align:'right',text:Math.round(84.8*9)},{type:'text',rect:[0,320-26*8-8,15,16],align:'right',text:Math.round(84.8*8)},{type:'text',rect:[0,320-26*7-8,15,16],align:'right',text:Math.round(84.8*7)},{type:'text',rect:[0,320-26*6-8,15,16],align:'right',text:Math.round(84.8*6)},{type:'text',rect:[0,320-26*5-8,15,16],align:'right',text:Math.round(84.8*5)},{type:'text',rect:[0,320-26*4-8,15,16],align:'right',text:Math.round(84.8*4)},{type:'text',rect:[0,320-26*3-8,15,16],align:'right',text:Math.round(84.8*3)},{type:'text',rect:[0,320-26*2-8,15,16],align:'right',10text:Math.round(84.8*2)},{type:'text',rect:[0,320-26*1-8,15,16],align:'right',text:Math.round(84.8*1)},{type:'text',rect:[0,320-8,15,16],align:'right',text:0},//Q{type:'text',rect:[55,322,0,16],align:'center',text:'Q2\'11'},{type:'text',rect:[124,322,0,16],align:'center',text:'Q3\'11'},{type:'text',rect:[191,322,0,16],align:'center',text:'Q4\'11'},{type:'text',rect:[259,322,0,16],align:'center',text:'Q1\'12'},{type:'text',rect:[327,322,0,16],align:'center',text:'Q2\'12'},{type:'text',rect:[394,322,0,16],align:'center',text:'Q3\'12'},{type:'text',rect:[462,322,0,16],align:'ce