ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条

来源：互联网发布：百分百营销软件破解编辑：程序博客网时间：2024/04/28 11:46

ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条

作者: IT小兵 | 分类: 前端开发 | 2014年4月25日| 浏览:18173℃ | 评论:0 |参与:0

在上一篇文章：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];

长方形的宽度和高度由样式定义。

纵向滚动条实现：

  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.

IT分享ECharts教程,ECharts 人物关系图,ECharts 力导向布局图,ECharts 人物关系图拖拽,ECharts 人物关系图点击事件,ECharts 点击事件,ECharts功能扩展,echarts 滚动条

横向滚动条实现：

   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

0 0