|
在上一篇文章：ECharts--完善的人物关系图-连线点击事件/样式/标注文字及源代码 中说明在echarts力导向布局图中增加 连线点击事件/样式/标注文字及源代码。今天介绍一下怎么给echarts力导向布局图增加滚动条。 全部的demo代码下载：http://pan.baidu.com/s/1jGzEb6u。 预览界面：http://www./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.
|
