本文转自：http://www.cnblogs.com/xhload3d/p/4463140.html
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候，感觉很痛苦，HT 集成的 Chart 组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案，接下来我们就来聊聊具体的解决方案。
首先，第一种解决方案是，在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外，再添加几个你自定义的绘制区域来绘制你想要的坐标轴，效果及 example 如下：
该 Chart 的定义代码见附录1(代码的定义太长)，代码虽然长，但是代码的逻辑并不乱，各个模块间的矢量描述还是比较清晰的，具体可以参考 HT 的矢量手册，看到如此长的代码，我自己都没信心去维护它，维护这样的代码纯粹是体力活，而且复用性也不高，每一个不同的 Chart 都要类似如此地绘制，绘制一两个这样的图表感觉还好，绘制多了，真心会感觉很恶心，再这上面很浪费时间。
其次，第二种解决方案是，通过数据绑定来自定义绘制坐标轴。实现以上相同效果，其代码见 附录2。可以明显看出其代码量会比第一种解决方案好很多，而且代码可以复用。在其他的图表中，可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上，并在定义 chart 时使用上如下代码就可以实现坐标文本的效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
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: 不同时刻，不同小区的电压情况的折线图：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
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]
}
]
}); |
相关推荐
一款流程图、网络图绘制软件，新颖小巧，功能强大，可以很方便的绘制各种专业的业务流程图，程序流程图，数据流程图，网络拓扑图等。它在设计时采用全拖曳式操作，并提供各种图形模板库并结合实例模板库，最大限度的...
网络拓扑图素材 矢量图 包括各种网络设备及拓扑图需要用到的一些素材
这个Repository提供的网络拓扑, 是一套完整可用的面向电信级/企业级用户的HTML5网络拓扑图方案. 图形是基于SVG绘制的, 同时配备了一系列UI套件, 使您更直观的了解Topology是如何工作的 指南 因为文件较多, 所以建议...
33套中国各省份矢量地图信息图表（PPT模板+预览图）,可以自行编辑以及上色。
描述矢量图形数据结构以及结构的建立、应用等
全套矢量ppt立体地图图表模板
ArcGIS版的1:5万和1:20万接图表，包含名称和编号，1:5万的还有分省
html5之可缩放矢量图形
网络拓扑图visio摸具和相应的ppt版本；还包括阿里云的所有产品的矢量图。
arcgis矢量化与拓扑教程 用于初学arcgis矢量化的人 入门教程类
立体直角弯曲箭头四分PPT创意图表，四项拼图拼合大脑图表、六项立体拼图拼合六边形图表、五项箭头循环关系图表、四项不同高度立体箭头拼合图表、四项拼图拼合正方形图表、四项立体拼图拼合齿轮图表、四项立体拼图...
矢量量化原理与应用本书介绍矢量量化的基本原理，各种矢量量化的构造和设计方法，以及矢量量化在语音编码，图像编码，语声识别与合成中的应用。 全文目录 第一章 概述 一、引言 第二章 矢量量化的基本原理 第三章 ...
矢量可编辑地图图表PPT模板，参考附件，需要的请下载！
用c#.net和svg动态生成矢量图(折线图,柱状图,饼状图等)
研究道路网的矢量表达、网络拓扑结构的提取和构建、客户点与道路网的匹配等关键技术，提出一套将客户点添加进城市配送道路网络的规则，对地理信息和交通信息进行提取，构建了配送线路优化所需的包含客户资源信息和...
图表模板-轻松制作世界地图矢量图.docx
地图矢量化软件的研究及应用，详细的文档说明及论文研究方法
MsvDraw是一款新的流程图、网络图绘制软件，新颖小巧，功能强大，可以很方便的绘制各种专业的业务流程图、组织结构图、商业图表、程序流程图，数据流程图，网络拓扑图以及其他的任何矢量图型等。它帮助您更方便，更...
针对线状实体组成的矢量图形，提出将矢量图形中线状实体分成不同的组，以组为计算单位将水印信息嵌入在矢量图形数据中，不仅能验证矢量图形的完整性，还能将窜改的定位能力精确到组，嵌入了水印信息的矢量图形仍有...