ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
作者: IT小兵 | 分类: 前端开发 | 2014年4月25日| 浏览:18173℃ | 评论:0 |参与:0
id="cproIframe_u2331572_2" width="640" height="60" src="http://pos.baidu.com/acom?adn=3&at=193&aurl=&cad=1&ccd=24&cec=UTF-8&cfv=0&ch=0&col=zh-CN&conBW=0&conOP=1&cpa=1&cpro_lu=1%2C%23c5e0f3%2C%23000000%2C%E5%AE%8B%E4%BD%93&dai=2&dis=0&layout_filter=image<r=<u=http%3A%2F%2Fwww.suchso.com%2FUIweb%2Fecharts-jiaochegn-forcechart-tuozhai-gundongtiao-click-tip-scroll.html&lu_161=0&lunum=6&n=95053049_cpr&pcs=1440x731&pis=10000x10000&ps=314x234&psr=1440x900&pss=1440x400&qn=31a64c787b2938ea&rad=&rsi0=640&rsi1=60&rsi5=4&rss0=%23FFFFFF&rss1=%23FFFFFF&rss2=%230000ff&rss3=%23444444&rss4=%23008000&rss5=&rss6=%23e10900&rss7=&scale=&skin=tabcloud_skin_5&stid=5&td_id=2331572&titFF=%E5%AE%8B%E4%BD%93&titFS=12&titTA=left&tn=text_default_640_60&tpr=1446174966809&ts=1&version=2.0&xuanting=0&dtm=BAIDU_DUP2_SETJSONADSLOT&dc=2&di=u2331572&ti=ECharts--%E5%9F%BA%E4%BA%8E%E5%8A%9B%E5%AF%BC%E5%90%91%E5%B8%83%E5%B1%80%E5%9B%BE%E5%8A%9F%E8%83%BD%E6%9B%B4%E5%AE%8C%E5%96%84%E7%9A%84%E4%BA%BA%E7%89%A9%E5%85%B3%E7%B3%BB%E5%9B%BE%E6%8F%92%E4%BB%B6%E6%89%A9%E5%B1%95-%E5%A2%9E%E5%8A%A0%E6%A8%AA%E7%BA%B5%E6%BB%9A%E5%8A%A8%E6%9D%A1%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%20-%20IT%E5%B7%A5%E4%BD%9C%E7%94%9F%E6%B4%BB%E8%BF%99%E7%82%B9%E4%BA%8B&tt=1446174966771.167.186.186" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true">
在上一篇文章：ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码 中说明在echarts力导向布局图中增加
连线点击事件/样式/标注文字及源代码。今天介绍一下怎么给echarts力导向布局图增加滚动条。
全部的demo代码下载：http://pan.baidu.com/s/1jGzEb6u。
预览界面：http://www.suchso.com/code/KFdemo/force.html
echarts力导向布局图是没有滚动条功能的。力导向布局图的本意不是做人物关系图，所以当作人物关系图使用的时候，
就会出现问题。数据太多，就会罩住了。所以考虑增加个滚动条。
思路：
如果只是在html中增加滚动条是完全没问题。但是echarts是基于zrender，zrender是基于html5的。html5的canvas是没有滚动条选项的。
需要自己给他计算滚动条。
1、提供是否展示滚动条的选项：isShowScrollBar
2、根据参数构建滚动条： if(option.isShowScrollBar) _buildScrollBar();
3、_buildScrollBar函数实现计算左侧和底层的滚动条。
根据zrender的高度和宽度，在zrender中增加2个长方形。
|
1
2
3
4
5
|
var
barPosition = [];
barPosition[0] = (zr.getWidth() / 2 - 50);
barPosition[1] = (zr.getHeight() / 2 - 50);
Ox = barPosition[0];
Oy = barPosition[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
|
var
vscrollArea = {
shape:
'rectangle'
,
id:
'vscrollArea'
,
style: {
x: zr.getWidth()-20,
y: 10,
width: 20,
height: zr.getHeight() - 30,
color:
'gray'
,
opacity: 0.3
}
};
var
vscroll = {
shape:
'rectangle'
,
id:
'vscroll'
,
style:{
x: zr.getWidth() - 20,
y: barPosition[1],
width: 20,
height: 50,
color:
'#5BB1E4'
},
draggable :
true
,
ondrift :
function
(shape, dx, dy) {
shape.style.y += dy;
if
(shape.style.y < 10)
shape.style.y = 10
else
if
(shape.style.y > zr.getHeight() - 70 )
// 80 = 50 + 40 - 10
shape.style.y = zr.getHeight() - 70;
zr.modShape(shape.id, shape);
zr.refresh();
return
true
;
},
ondragstart:
function
(params) {
var
shape = params.target;
temperature = 0.001
//拖动滚动条时图不动
},
ondragend :
function
(params) {
var
shape = params.target;
self.clear();
_buildShape();
temperature = 1.0;
dy = (shape.style.y - Oy)*2;
for
(
var
i
in
nodeShapes){
nodeShapes[i].style.y -= dy;
nodeShapes[i].style.x -= dx;
}
_step();
return
true
;
}
};
|
以纵向滚动条为例。vscrollArea是滚动条滚动区域，如图中的红色1，vscroll是可见可拖动的滚动条，如图中的红色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
|
var
hscrollArea = {
shape:
'rectangle'
,
id:
'hscrollArea'
,
style: {
x: 10,
y: zr.getHeight() - 20,
width: zr.getWidth() - 30,
height: 20,
color:
'gray'
,
opacity: 0.3
}
};
var
hscroll = {
shape:
'rectangle'
,
id:
'hscroll'
,
style : {
x: barPosition[0],
y: zr.getHeight() - 20,
width: 50,
height: 20,
color:
'#5BB1E4'
},
draggable :
true
,
ondrift :
function
(shape, dx, dy) {
shape.style.x += dx;
if
(shape.style.x < 10)
shape.style.x = 10
else
if
(shape.style.x > zr.getWidth() - 70 )
shape.style.x = zr.getWidth() - 70;
zr.modShape(shape.id, shape);
zr.refresh();
return
true
;
},
ondragstart:
function
(params) {
var
shape = params.target;
temperature = 0.001
//拖动滚动条时图不动
},
ondragend :
function
(params) {
var
shape = params.target;
self.clear();
_buildShape();
temperature = 1.0;
dx = (shape.style.x - Ox)*2;
for
(
var
i
in
nodeShapes){
nodeShapes[i].style.x -= dx;
nodeShapes[i].style.y -= dy;
}
_step();
return
true
;
}
};
zr.addShape(vscrollArea);
zr.addShape(vscroll);
zr.addShape(hscrollArea);
zr.addShape(hscroll);
|
参考资料：
HTML5里面的知识：Canvas简单与KineticJS滚动条！ - linyahuis和网页设计点滴 - 博客频道 - CSDN.NET
http://blog.csdn.net/linyahuis/article/details/12754369
转发注明：IT分享 http://www.suchso.com
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
