资源描述：
《矢量Chart图表嵌入.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、矢量Chart图表嵌入HTML5使用HTforWeb(以下简称HT)开发HTML5网络拓扑图的开发有Chart需求的项目的时候，感觉很痛苦，HT集成的Chart组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案，接下来我们就来聊聊具体的解决方案。首先，第一种解决方案是，在定义Chart矢量的时候在comps中除了定义Chart外，再添加几个你自定义的绘制区域来绘制你想要的坐标轴，效果及example如下：该Chart的定义代码见附录1(代码的定义太长)，代码虽然长，但是代码的逻辑并不乱，各个模块间的矢量描述还是比较清晰的，具体可以参考HT
2、的矢量手册，看到如此长的代码，我自己都没信心去维护它，维护这样的代码纯粹是体力活，而且复用性也不高，每一个不同的Chart都要类似如此地绘制，绘制一两个这样的图表感觉还好，绘制多了，真心会感觉很恶心，再这上面很浪费时间。其次，第二种解决方案是，通过数据绑定来自定义绘制坐标轴。实现以上相同效果，其代码见附录2。可以明显看出其代码量会比第一种解决方案好很多，而且代码可以复用。在其他的图表中，可以将横轴和纵轴的文本内容设置到data的attr属性上，并在定义chart时使用上如下代码就可以实现坐标文本的效果：ht.Default.setImage('chartN
3、ame',{width:Number,height: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的写法，稍微优化了下代码
4、，提高代码的可维护性。但是，这样但使用方法总刚觉有些别扭，明明坐标轴是Chart的一部分，在定义Chart上却要硬生生地将图表和坐标部分分开，那如果用户还要在定义标题、坐标刻度、坐标说明等需求，那这个方案还是无法爽快的解决大部分通用的需求，需要定义许多CompType来渲染不同的需求，而且在使用上也不是那么爽快。接下来要说明的方案三，就是来解决使用上及维护上的问题。最后，第三种解决方案是，和第二种解决方案差不多，都是通过ht.Default.setCompType('typeName',function(g,rect,comp,data,view){})的
5、方法来定义名字为axisChart的CompType，不同的是，数据并不是设置到data中，而是在ht.Default.setImage()的comps中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件，使用方式很简单，在引入ht.js核心文件的前提下，引入附件的axisChart.js文件即可。接下来来看下axisChart的具体使用及几个简单的例子：例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：代码如下：ht.Default.setImage('c1',{width:600,height:400,comps:[{typ
6、e:'axisChart',rect:[0,0,600,400],yAxis:[{name:'单位：V',max:270,min:150,splitNumber:10,axisTitle:{text:'电压',rotate:-90},axisLine:{arrow:true}},{position:'right',name:'单位：I',max:20,splitNumber:20,axisTitle:{text:'电流',rotate:90},axisLabel:{interval:1},axisLine:{arrow:true}}],xAxis:[{ty
7、pe:'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'}}
8、]}]});ht.Default.setImage('c1',{w
