|
在上一篇文章：ECharts--完善的人物關(guān)系圖-連線點(diǎn)擊事件/樣式/標(biāo)注文字及源代碼 中說明在echarts力導(dǎo)向布局圖中增加 連線點(diǎn)擊事件/樣式/標(biāo)注文字及源代碼。今天介紹一下怎么給echarts力導(dǎo)向布局圖增加滾動條。 全部的demo代碼下載：http://pan.baidu.com/s/1jGzEb6u。 預(yù)覽界面：http://www./code/KFdemo/force.html
echarts力導(dǎo)向布局圖是沒有滾動條功能的。力導(dǎo)向布局圖的本意不是做人物關(guān)系圖，所以當(dāng)作人物關(guān)系圖使用的時候， 就會出現(xiàn)問題。數(shù)據(jù)太多，就會罩住了。所以考慮增加個滾動條。 思路： 如果只是在html中增加滾動條是完全沒問題。但是echarts是基于zrender，zrender是基于html5的。html5的canvas是沒有滾動條選項(xiàng)的。 需要自己給他計算滾動條。
1、提供是否展示滾動條的選項(xiàng)：isShowScrollBar 2、根據(jù)參數(shù)構(gòu)建滾動條： if(option.isShowScrollBar) _buildScrollBar(); 3、_buildScrollBar函數(shù)實(shí)現(xiàn)計算左側(cè)和底層的滾動條。 根據(jù)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];
|
長方形的寬度和高度由樣式定義。 縱向滾動條實(shí)現(xiàn)： 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是滾動條滾動區(qū)域，如圖中的紅色1，vscroll是可見可拖動的滾動條，如圖中的紅色2. 
橫向滾動條實(shí)現(xiàn)： 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和網(wǎng)頁設(shè)計點(diǎn)滴 - 博客頻道 - CSDN.NET
http://blog.csdn.net/linyahuis/article/details/12754369
轉(zhuǎn)發(fā)注明：IT分享 http://www.
|
