现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2014年4月25日| 热度:℃ | 评论: |参与:

在上一篇文章: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个长方形。

   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.


横向滚动条实现:

   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 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询