大佬教程收集整理的这篇文章主要介绍了矢量Chart图表嵌入HTML5网络拓扑图的应用,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是也不是没有解决方案,接下来我们就来聊聊具体的解决方案。
首先,第一种解决方案是,在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外,再添加几个你自定义的绘制区域来绘制你想要的坐标轴,效果及 example 如下:
该 Chart 的定义代码见附录1(代码的定义太长),代码虽然长,但是代码的逻辑并不乱,各个模块间的矢量描述还是比较清晰的,具体可以参考 HT 的矢量手册,看到如此长的代码,我自己都没信心去维护它,维护这样的代码纯粹是体力活,而且复用性也不高,每一个不同的 Chart 都要类似如此地绘制,绘制一两个这样的图表感觉还好,绘制多了,真心会感觉很恶心,再这上面很浪费时间。
其次,第二种解决方案是,通过数据绑定来自定义绘制坐标轴。实现以上相同效果,其代码见附录2。可以明显看出其代码量会比第一种解决方案好很多,而且代码可以复用。在其他的图表中,可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上,并在定义 chart 时使用上如下代码就可以实现坐标文本的效果:
ht.Default.setImage('chartName',{ width: @R_874_10793@er,height: @R_874_10793@er,comps: [ { // define chart },{ 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',view){}) 的方法来定义名字为 axisChart 的 CompType,不同的是,数据并不是设置到 data 中,而是在 ht.Default.setImage() 的 comps 中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件,使用方式很简单,在引入 ht.js 核心文件的前提下,引入附件的 axisChart.js 文件即可。
接下来来看下 axisChart 的具体使用及几个简单的例子:
例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图:
代码如下:
ht.Default.setImage('c1',{ width: 600,height: 400,comps: [ { type: 'axisChart',rect: [0,600,400],yAxis: [ { name: '单位:V',max: 270,min: 150,split@R_874_10793@er: 10,axistitle: { text: '电压',rotate: -90 },axisLine: { arrow: true } },{ position: 'right',name: '单位:I',max: 20,split@R_874_10793@er: 20,axistitle: { text: '电流',rotate: 90 },axisLabel: { interval: 1 },axisLine: { arrow: true } } ],xAxis: [ { type: 'category',data: ['抚梅源','藕花深处','紫东花园','紫金苑','华府山水','水云间','瑞景新城'],axistitle: { text: '小区名称' } } ],series: [ { label: function(value){ return value + ' 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: 不同时刻,不同小区的电压情况的折线图:
代码如下:
ht.Default.setImage('c2',max: 240,min: 190,xAxis: [ { type: 'time',min: new Date(2015,1),max: new Date(2015,2),split@R_874_10793@er: 25,axistitle: { text: '时间' },axisLabel: { interval: 2,formatter: function(value,index,min,maX){ return value.format('dd-hh'); } },series: [ { type: 'line',218,220,{ type: 'line',data: { values: [225,208,206,205,221,213,224,216,219,207,222,215],color: '#7d0' } },linePoint: true,line3d: true,data: { values: [211,223,217,212,223],color: '#ab0' } } ] } ] });
最后,还有一点要说明,axisChart 的代码并不是那么的无懈可击,我个人觉得代码设计上还是有些欠缺,所有的代码总共有差不多 1000 行,我觉得太臃肿了,在设计上自己也感觉不是那么的友好,等想修改的时候发现已经投入太多时间了,还有好多事情等待着我我去学习、去探讨,所以也就线这样吧,等有空了再重构一番,但是我相信在功能上还是能够满足大部分的需求,在设计上,或者是实现的方法上,还是在使用过程中发现的 bug,还望大家能够不吝赐教。
附录1
ht.Default.setImage('chart',{ width: 650,height: 380,comps: [ // column chart { type: 'columnChart',rect: [10,60,630,260],labelColor: '#20284C',labelFont: '8px Arial',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,113,130,167,159,213] } ] },// 竖线 { type: 'rect',rect: [15,1,BACkground: '#566CB0' },{ type: 'shape',rect: [5.5,30,20,30],borderWidth: 1,borderColor: '#566CB0',points: [0,20 / 3 * 2,20 / 2,segments: [1,2,2] },// 坐标文本 { type: 'text',320 - 26 * 10 - 8,16],align: 'right',text: Math.round(84.8 * 10) },{ type: 'text',320 - 26 * 9 - 8,text: Math.round(84.8 * 9) },320 - 26 * 8 - 8,text: Math.round(84.8 * 8) },320 - 26 * 7 - 8,text: Math.round(84.8 * 7) },320 - 26 * 6 - 8,text: Math.round(84.8 * 6) },320 - 26 * 5 - 8,text: Math.round(84.8 * 5) },320 - 26 * 4 - 8,text: Math.round(84.8 * 4) },320 - 26 * 3 - 8,text: Math.round(84.8 * 3) },320 - 26 * 2 - 8,text: Math.round(84.8 * 2) },320 - 26 * 1 - 8,text: Math.round(84.8 * 1) },320 - 8,text: 0 },// Q { type: 'text',rect: [55,322,align: 'center',text: 'Q2\'11' },rect: [124,text: 'Q3\'11' },rect: [191,text: 'Q4\'11' },rect: [259,text: 'Q1\'12' },rect: [327,text: 'Q2\'12' },rect: [394,text: 'Q3\'12' },rect: [462,text: 'Q4\'12' },rect: [529,text: 'Q1\'13' },rect: [596,text: 'Q2\'13' },// line { type: 'rect',320,620,1],rect: [635,310.5,20],points: [20 / 3 * 2,20 / 2],2] } ] });
附录2
ht.Default.setCompType('yAxis',view) { var labels = data.a('yLabels'),len = labels.length,x = rect.x,y = rect.y,w = rect.width,h = rect.height,dh = h / (len - 1); g.save(); g.font = '12px arial,sans-serif'; g.fillStyle = 'black'; g.textAlign = 'right'; for(var i = 0; i < len; i++){ g.fillText(labels[i],x,y); y += dh; } g.restore(); }); ht.Default.setCompType('xAxis',view) { var labels = data.a('xLabels'),dw = w / (len * 3 + 1),dw3 = 3 * dw; x += dw * 2; g.save(); g.font = '12px arial,sans-serif'; g.fillStyle = 'black'; g.textAlign = 'center'; for(var i = 0; i < len; i++){ g.fillText(labels[i],y); x += dw3; } g.restore(); }); ht.Default.setImage('chart1',// 向上的箭头 { type: 'shape',// 坐标文本 { type: 'yAxis',rect: [12,260] },// Q { type: 'xAxis',330,16] },// 向右的箭头 { type: 'shape',2] } ] });
以上是大佬教程为你收集整理的矢量Chart图表嵌入HTML5网络拓扑图的应用全部内容,希望文章能够帮你解决矢量Chart图表嵌入HTML5网络拓扑图的应用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。