矢量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: Number,
height: Number,
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', function(g, rect, comp, data, view){}) 的方法来定义名字为 axisChart 的 CompType，不同的是，数据并不是设置到 data 中，而是在 ht.Default.setImage() 的 comps 中直接定义其相关属性。具体的配置属性说明及其具体的代码实现可以查看附件，使用方式很简单，在引入 ht.js 核心文件的前提下，引入附件1的 axisChart.js 文件即可。
接下来来看下 axisChart 的具体使用及几个简单的例子：
例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：
代码如下：
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: {
arrow: 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){
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', {
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: true
}
}
],
xAxis: [
{
type: 'time',
min: new Date(2015, 0, 1),
max: new Date(2015, 0, 2),
splitNumber: 25,
axisTitle: {
text: '时间'
},
axisLabel: {
interval: 2,
formatter: function(value, index, min, max){
return value.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'
}
}
]
}
]
});
最后，还有一点要说明，axisChart 的代码并不是那么的无懈可击，我个人觉得代码设计上还是有些欠缺，所有的代码总共有差不多 1000 行，我觉得太臃肿了，在设计上自己也感觉不是那么的友好，等想修改的时候发现已经投入太多时间了，还有好多事情等待着我我去学习、去探讨，所以也就线这样吧，等有空了再重构一番，但是我相信在功能上还是能够满足大部分的需求，在设计上，或者是实现的方法上，还是在使用过程中发现的 bug，还望大家能够不吝赐教。
附录1
ht.Default.setImage('chart', {
width: 650,
height: 380,
comps: [
// column chart
{
type: 'columnChart',
rect: [10, 60, 630, 260],
label: true,
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, 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,
borderColor: '#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',
text: 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: 'center',
text: 'Q4\'12'
},
{
type: 'text',
rect: [529, 322, 0, 16],
align: 'center',
text: 'Q1\'13'
},
{
type: 'text',
rect: [596, 322, 0, 16],
align: 'center',
text: 'Q2\'13'
},
// line
{
type: 'rect',
rect: [15, 320, 620, 1],
background: '#566CB0'
},
{
type: 'shape',
rect: [635, 310.5, 30, 20],
borderWidth: 1,
borderColor: '#566CB0',
points: [20 / 3 * 2, 0, 30, 20 / 2, 20 / 3 * 2, 20, 30, 20 / 2, 0, 20 / 2],
segments: [1, 2, 2, 1, 2]
}
]
});
附录2
ht.Default.setCompType('yAxis', function(g, rect, comp, data, 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', function(g, rect, comp, data, view) {
var labels = data.a('xLabels'),
len = labels.length,
x = rect.x,
y = rect.y,
w = rect.width,
h = rect.height,
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], x, y);
x += dw3;
}
g.restore();
});
ht.Default.setImage('chart1', {
width: 650,
height: 380,
comps: [
// column chart
{
type: 'columnChart',
rect: [10, 60, 630, 260],
label: true,
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, 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,
borderColor: '#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: 'yAxis',
rect: [12, 60, 15, 260]
},
// Q
{
type: 'xAxis',
rect: [10, 330, 630, 16]
},
// line
{
type: 'rect',
rect: [15, 320, 620, 1],
background: '#566CB0'
},
// 向右的箭头
{
type: 'shape',
rect: [635, 310.5, 30, 20],
borderWidth: 1,
borderColor: '#566CB0',
points: [20 / 3 * 2, 0, 30, 20 / 2, 20 / 3 * 2, 20, 30, 20 / 2, 0, 20 / 2],
segments: [1, 2, 2, 1, 2]
}
]
});
矢量Chart图表嵌入HTML5网络拓扑图的应用的更多相关文章
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- HTML5 网络拓扑图性能优化
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- 快速开发基于 HTML5 网络拓扑图应用--入门篇（一）
计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点.线关系的方法.把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构.网络的拓扑结构 ...
- 快速开发基于 HTML5 网络拓扑图应用--入门篇（二）
上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 s ...
- 快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇
前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的 ...
- 快速创建 HTML5 Canvas 电信网络拓扑图
前言 属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能 ...
- 基于HTML5的网络拓扑图(1)
什么是网络拓扑 网络拓扑,指构成网络的成员间特定的排列方式.分为物理的,即真实的.或者逻辑的,即虚拟的两种.如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线.节点间距 ...
随机推荐
- maven安装nexus私服
从nexus官网下载Nexus Repository Manager OSS 2.x的安装包:nexus-2.14.1-01-bundle.tar.gz,3.x版本需要jdk8及以上 解压 tar x ...
- SQL入门经典(十) 之事务
事务是什么?事务关键在与其原子性.原子性概念是指可以把一些事情当作一个执行单元来看待.从数据库角度看待.他是指应该全部执行或者全部不执行一条或多条语句的最小组合.当处理数据时候经常确保一件事发生另一件 ...
- 设计模式之美：Object Pool（对象池）
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):实现 DatabaseConnectionPool 类. 实现方式(二):使用对象构造方法和预分配方式实现 ObjectPool ...
- 2015继续任性——不会Git命令，照样玩转Git
最近事情比较多,一眨眼,已经半个月没有写博客了~不得不感慨光阴似箭啊!当然,2015年有很多让我们期待的事情,比如win10正式版..NET开源.VS2015等等.想想都让人兴奋啊~~ 为了迎接VS2 ...
- 【网站国际化必备】Asp.Net MVC 集成Paypal（贝宝）快速结账 支付接口 ，附源码demo
开篇先给大家讲段历史故事,博主是湖北襄阳人.襄阳物华天宝,人杰地灵,曾用名襄樊.在2800多年的历史文化中出现了一代名相诸葛亮(卧龙),三国名士庞统(凤雏),魏晋隐士司马徽(水镜先生),唐代大诗人孟浩 ...
- Linux sort命令
200 ? "200px" : this.width)!important;} --> 介绍 sort命令是一个文本排序命令,它能对标准输入和文本文件进行排序,并且能将结果通 ...
- 在ThoughtWorks工作这几年我学到了什么？
不知不觉,从2012年5月1日加入ThoughtWorks到现在,已经3年有余了.时间过得很快,这三年多我干了很多事情,但仔细想想也没有什么特别值得一提的.在一个公司呆久了总觉得很多事情是理所当然的, ...
- AWS系列之三 使用EBS
Amazon Elastic Block Store(EBS)可作为EC2实例的持久性数据块级存储.其具有高可用性和持久性的特点,可用性高达99.999%.给现有的EC2实例扩展新的存储块只需要几分钟 ...
- import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包（转载）
http://www.xuebuyuan.com/2008608.html 在Eclipse中处理图片,需要引入两个包:import com.sun.image.codec.jpeg.JPEGCode ...
- Java基础之泛型
泛型: (1)为什么会出现泛型? 因为集合存放的数据类型不固定,故往集合里面存放元素时,存在安全隐患, 如果在定义集合时,可以想定义数组一样指定数据类型,那么就可以解决该类安全问题. JDK1.5后出 ...