澳门在线威尼斯官方 > 威尼斯澳门在线 > 基于jquery自定义图片热区效果,用500行纯前端代

原标题:基于jquery自定义图片热区效果,用500行纯前端代

浏览次数:55 时间:2019-10-31

多少展示

数码管理好后就是大家的宗旨内容,数据突显了。

图片 1

这一步关键是应用select2提供的取舍控件营造图形语法来驱动数据显示。如上图所示,对应的G2代码图形语法为:

g2chart.facet('rect', { fields: [ 'Admit', 'Dept' ], eachView(view) { view.interval().position('Gender*Freq').color('Gender').label('Freq'); } });

1
2
3
4
5
6
g2chart.facet('rect', {
  fields: [ 'Admit', 'Dept' ],
  eachView(view) {
    view.interval().position('Gender*Freq').color('Gender').label('Freq');
  }
});

图片语法主要含有以下几个重大的要素:

 

先看效果图:
图片 2
用了jquery.image-maps.js那个插件 下载地址 //www.jb51.net/jiaoben/57930.html
原理是:
因此拖动总计出这两天热区可活动模块的left top right bottom
对应area的 coords 属性集成上边的职分,就足以兑现热区了。
对应的模块代码是:

总结

本文分享了贰个应用纯前端技艺创设三个雷同Tableau的BI应用的例证,整个代码总计:

  • JS 370 行 JS6
  • HTML 69 + 9 + 5 = 83
  • CSS 21

总计474 行,用那样少的代码就能够实现三个看起来还行的BI工具,还算不错啊。当然这里最重假设出于开源社区提供了那般多好的前端库以供应用,笔者要做的独自是让它们有效的做事在一同。这一个只可以算是个原型,从效果与利益和品质上来讲都不成熟,不过能在浏览器中不依附别的的服务器来兑现BI的多寡剖判效果与利益,应该会有过多个人想要在温馨的利用中嵌贰个吧?

结缘笔者前边分享的TensorflowJS的文章,上边一步或许是出席预测效果,为数量深入深入分析加入智能,前端接纳的前途,不可估量!

 

<!--模块显示 begin-->
<div class="modeShow">
<div id="debug"></div>
<div class="imgMap mapBox">
<img src="../images/hot_images_map.png" name="test" border="0" usemap="#Map1" width="980" height="450" ref='imageMaps' />
<map name="Map1">
<area shape="rect" coords="300,80,500,150" href="mall.10010.com" />
</map>
</div>
</div>
<!--模块展现 end—>

坐标系 Coordinates

坐标系是将两种职位标度结合在联合构成的 2 维定位系统,描述了数额是怎么映射到图片所在的平面。

G2提供了以下二种坐标系:

coordType 说明
rect 直角坐标系,目前仅支持二维,由 x, y 两个互相垂直的坐标轴构成。
polar 极坐标系,由角度和半径 2 个维度构成。
theta 一种特殊的极坐标系,半径长度固定,仅仅将数据映射到角度,常用于饼图的绘制。
helix 螺旋坐标系,基于阿基米德螺旋线。

 

页面援用:$('.imgMap').imageMaps();

参考

  • axios  基于Promise的HTTP客户端
  • alasql 基于JS的开源SQL数据库
  • jquery datatable JQuery的多寡表格插件
  • select2 JQuery的选用控件插件
  • 有关博客 利用开源软件急速搭建数据深入剖析平台 
  • 有关博客 多少可视化中的视觉属性

    2 赞 1 收藏 评论

图片 3

到现在整合治理下发出来,希望大家大器晚成道学习吧

伯克利数据堆积柱状图

图片 4

多少管理:

SELECT SUM(Freq) as f , Gender , Admit FROM table GROUP BY Gender, Admit

1
SELECT SUM(Freq) as f , Gender , Admit FROM table GROUP BY Gender, Admit

图形语法:

g2chart.intervalStack().position('Gender*f').color('Admit')

1
g2chart.intervalStack().position('Gender*f').color('Admit')

 

(function($) {
jQuery.fn.imageMaps = function(setting) {
var $container = this;
if ($container.length == 0) return false;
$container.each(function(){
var container = $(this);
var $images = container.find('img[ref=imageMaps]');
$images.wrap('<div class="image-maps-conrainer image-maps-conrainerEdit" style="position:relative;"></div>').css('border','1px solid #ccc');
$images.each(function(){
var _img_conrainer = $(this).parent();
_img_conrainer.append('<div class="button-conrainer"><a href="javascript:void(0)" class="addHot">增加热门</a><a href="javascript:void(0)" class="addImg">上传图片</a><a class="delSub delMode" href="javascript:void(0)">删除×</a></div>').append('<div class="link-conrainer"><ul></ul><div class="clr"></div></div><div class="clr"></div><span class="numFloor">模块-1</span>').append($.browser.msie ? $('<div class="position-conrainer" style="position:absolute"></div>').css({
background:'#fff',
opacity:0
}) : '<div class="position-conrainer" style="position:absolute"></div>');
var _img_offset = $(this).offset();
var _img_conrainer_offset = _img_conrainer.offset();
_img_conrainer.find('.position-conrainer').css({
top: _img_offset.top - _img_conrainer_offset.top,
left: _img_offset.left - _img_conrainer_offset.left,
width:$(this).width(),
height:$(this).height(),
border:'1px solid transparent'
});
var map_name = $(this).attr('usemap').replace('#','');
if(map_name !=''){
var index = 1;
var _link_conrainer = _img_conrainer.find('.link-conrainer ul');
var _position_conrainer = _img_conrainer.find('.position-conrainer');
var image_param = $(this).attr('name') == '' ? '' : '['+ $(this).attr('name') + ']';
container.find('map[name='+map_name+']').find('area[shape=rect]').each(function(){
var coords = $(this).attr('coords');
$(this).attr('ref',"1");
_link_conrainer.append('<li ref="'+index+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="'+$(this).attr('href')+'" /><input type="hidden" class="rect-value" name="rect'+index+'" value="'+coords+'" /></li>');
coords = coords.split(',');
_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2]-coords[0])+'px;height:'+(coords[3]-coords[1])+'px;"><div class="map-position-bg"></div><span class="link-number-text">热点'+index+'</span><span class="delete">X</span><span class="resize"></span></div>');
index++;
});
}
});
});
$container.find('.button-conrainer .addHot').live("click",function(){
var _link_conrainer = $(this).parent().parent().find('.link-conrainer ul');
var _position_conrainer = $(this).parent().parent().find('.position-conrainer');
var index = _link_conrainer.find('.map-link').length +1;
var _coordsMap = $(this).parent().parent().next('map');
var image = $(this).parent().parent().find('img[ref=imageMaps]').attr('name');
image = (image == '' ? '' : '['+ image + ']');
_link_conrainer.append('<li ref="'+index+'" class="map-link"><span class="link-number-text">热点'+index+'</span>: <input type="text" size="60" name="link'+index+'" class="linkHref" value="" /><input type="hidden" class="rect-value" name="rect'+index+'" value="300,80,500,150" /></li>');
_position_conrainer.append('<div ref="'+index+'" class="map-position" style="left:300px;top:80px;width:200px;height:70px;"><div class="map-position-bg"></div><span class="link-number-text">热点'+index+'</span><span class="delete">X</span><span class="resize"></span></div>');
var coords = _link_conrainer.find('input[name=rect'+ index +']').val();
_coordsMap.append('<area ref="'+index+'" href="" coords="'+ coords +'" shape="rect">');
$("input[name='link"+index+"']").val("请输入本火热对应的链接地址");
bind_map_event();
define_css();
//添加map热区
});
//修正链接地址
$(".linkHref").live("blur",function(){
var valueHref = $(this).val();
var thisRef = $(this).parent().attr('ref');
var appArea = $(this).parents(".link-conrainer").parent().next('map');
$(this).val(valueHref);
appArea.find('area[ref='+thisRef+']').attr("href",valueHref);
});
//绑定map事件
function bind_map_event(){
$('.position-conrainer .map-position .map-position-bg').each(function(){
var map_position_bg = $(this);
var conrainer = $(this).parent().parent();
map_position_bg.unbind('mousedown').mousedown(function(event){
map_position_bg.data('mousedown', true);
map_position_bg.data('pageX', event.pageX);
map_position_bg.data('pageY', event.pageY);
map_position_bg.css('cursor','move');
return false;
}).unbind('mouseup').mouseup(function(event){
map_position_bg.data('mousedown', false);
map_position_bg.css('cursor','default');
return false;
});
conrainer.mousemove(function(event){
if (!map_position_bg.data('mousedown')) return false;
var dx = event.pageX - map_position_bg.data('pageX');
var dy = event.pageY - map_position_bg.data('pageY');
if ((dx == 0) && (dy == 0)){
return false;
}
var map_position = map_position_bg.parent();
var p = map_position.position();
var left = p.left+dx;
if(left <0) left = 0;
var top = p.top+dy;
if (top < 0) top = 0;
var bottom = top + map_position.height();
if(bottom > conrainer.height()){
top = top-(bottom-conrainer.height());
}
var right = left + map_position.width();
if(right > conrainer.width()){
left = left-(right-conrainer.width());
}
map_position.css({
left:left,
top:top
});
map_position_bg.data('pageX', event.pageX);
map_position_bg.data('pageY', event.pageY);
bottom = top + map_position.height();
right = left + map_position.width();
var newArea = new Array(left,top,right,bottom).join(',');
var mapApp = conrainer.parent().next('map');
mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea);
$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea);
return false;
}).mouseup(function(event){
map_position_bg.data('mousedown', false);
map_position_bg.css('cursor','default');
return false;
});
});
$('.position-conrainer .map-position .resize').each(function(){
var map_position_resize = $(this);
var conrainer = $(this).parent().parent();
map_position_resize.unbind('mousedown').mousedown(function(event){
map_position_resize.data('mousedown', true);
map_position_resize.data('pageX', event.pageX);
map_position_resize.data('pageY', event.pageY);
return false;
}).unbind('mouseup').mouseup(function(event){
map_position_resize.data('mousedown', false);
return false;
});
//点击撤销拖动
conrainer.unbind('click').click(function(event){
map_position_resize.data('mousedown', false);
return false;
});
conrainer.mousemove(function(event){
if (!map_position_resize.data('mousedown')) return false;
var dx = event.pageX - map_position_resize.data('pageX');
var dy = event.pageY - map_position_resize.data('pageY');
if ((dx == 0) && (dy == 0)){
return false;
}
var map_position = map_position_resize.parent();
var p = map_position.position();
var left = p.left;
var top = p.top;
var height = map_position.height()+dy;
if((top+height) > conrainer.height()){
height = height-((top+height)-conrainer.height());
}
if (height <20) height = 20;
var width = map_position.width()+dx;
if((left+width) > conrainer.width()){
width = width-((left+width)-conrainer.width());
}
if(width <50) width = 50;
map_position.css({
width:width,
height:height
});
map_position_resize.data('pageX', event.pageX);
map_position_resize.data('pageY', event.pageY);
bottom = top + map_position.height();
right = left + map_position.width();
var newArea = new Array(left,top,right,bottom).join(',');
var mapApp = conrainer.parent().next('map');
mapApp.find('area[ref='+map_position.attr('ref')+']').attr("coords",newArea);
$('.link-conrainer li[ref='+map_position.attr('ref')+'] .rect-value').val(newArea);
return false;
}).mouseup(function(event){
map_position_resize.data('mousedown', false);
return false;
});
});
$('.position-conrainer .map-position .delete').unbind('click').click(function(){
var ref = $(this).parent().attr('ref');
var _link_conrainer = $(this).parent().parent().parent().find('.link-conrainer ul');
var _coordsMap = $(this).parent().parent().parent().next('map');
var _position_conrainer = $(this).parent().parent().parent().find('.position-conrainer');
_link_conrainer.find('.map-link[ref='+ref+']').remove();
_position_conrainer.find('.map-position[ref='+ref+']').remove();
_coordsMap.find('area[ref='+ref+']').remove();
var index = 1;
_link_conrainer.find('.map-link').each(function(){
$(this).attr('ref',index).find('.link-number-text').html('热点'+index);
index ++;
});
index = 1;
_position_conrainer.find('.map-position').each(function(){
$(this).attr('ref',index).find('.link-number-text').html('热点'+index);
index ++;
});
index = 1;
_coordsMap.find('area').each(function(){
$(this).attr('ref',index);
index ++;
});
});
}
bind_map_event();
function define_css(){
//样式定义
$container.find('.map-position .resize').css({
display:'block',
position:'absolute',
right:0,
bottom:0,
width:5,
height:5,
cursor:'nw-resize',
background:'#000'
});
}
define_css();
};
})(jQuery);

Berkeley数据柱状图

图片 5

多少管理:

SELECT SUM(Freq) as f , Gender FROM table GROUP BY Gender

1
SELECT SUM(Freq) as f , Gender FROM table GROUP BY Gender

图形语法:

g2chart.interval().position('Gender*f').color('Gender').label('f');

1
g2chart.interval().position('Gender*f').color('Gender').label('f');

 

复制代码 代码如下:

分面 Facet

分面,将风度翩翩份数据遵照某些维度分隔成几何子集,然后创造二个图片的矩阵,将每一个数据子集绘制到图片矩阵的窗格中。分面其实提供了多个功能:

  1. 根据钦定的维度划分数据集;
  2. 对图纸进行排版。

G2辅助以下的分面类型:

分面类型 说明
rect 默认类型,指定 2 个维度作为行列,形成图表的矩阵。
list 指定一个维度,可以指定一行有几列,超出自动换行。
circle 指定一个维度,沿着圆分布。
tree 指定多个维度,每个维度作为树的一级,展开多层图表。
mirror 指定一个维度,形成镜像图表。
matrix 指定一个维度,形成矩阵分面。

专一,在本身的代码中,为了简化使用,只援助list和rect,当绑定四个字段的时候用list,绑定七个字段的时候用rect。

除了上边提到的成分,当然还恐怕有为数不菲其余的因素大家从未满含和援助,举例:坐标轴,图例,提醒等等。

有关图形的语法的越多内容,请参照他事他说加以考察这里。

变迁图形语法的着力代码如下:

function getFacet(faced, grammarScript) { let facedType = "list"; let facedScript = "" grammarScript = grammarScript.replace(chartScriptName,"view"); if ( faced.length == 2 ) { facedType = "rect"; } let facedFields = faced.join("', '") facedScript = facedScript + `${ chartScriptName }.facet('${ facedType }', {n`; facedScript = facedScript + ` fields: [ '${ facedFields }' ],n`; facedScript = facedScript + ` eachView(view) {n`; facedScript = facedScript + ` ${ grammarScript };n`; facedScript = facedScript + ` }n`; facedScript = facedScript + `});n`; return facedScript } function getGrammar() { let grammar = {}, grammarScript = chartScriptName + "."; grammar.geom = $('#geomSelect').val(); grammar.coord = $('#coordSelect').val(); grammar.faced = $('#facetSelect').val(); geom_attributes.map(function(attr){ grammar[attr] = $('#' + attr + "attr").val(); }); grammarScript = grammarScript + grammar.geom + "()"; geom_attributes.map(function(attr){ if (grammar[attr].length > 0) { grammarScript = grammarScript + "." + attr + "('" + grammar[attr].join("*") + "')"; } }); if (grammar.coord) { grammarScript = grammarScript + ";n " + chartScriptName + "." + "coord('" + grammar.coord + "');"; } else { rammarScript = grammarScript

  • ";"; } if ( grammar.faced ) { if ( grammar.faced.length == 1 || grammar.faced.length == 2 ) { grammarScript = getFacet(grammar.faced, grammarScript); } } console.log(grammarScript) return grammarScript; }
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
function getFacet(faced, grammarScript) {
  let facedType = "list";
  let facedScript = ""
  grammarScript = grammarScript.replace(chartScriptName,"view");
  if ( faced.length == 2 ) {
      facedType = "rect";
  }
  let facedFields = faced.join("', '")
  facedScript = facedScript + `${ chartScriptName }.facet('${ facedType }', {n`;
  facedScript = facedScript + `  fields: [ '${ facedFields }' ],n`;
  facedScript = facedScript + `  eachView(view) {n`;
  facedScript = facedScript + `    ${ grammarScript };n`;
  facedScript = facedScript + `  }n`;
  facedScript = facedScript + `});n`;
  return facedScript
}
 
function getGrammar() {
  let grammar = {}, grammarScript = chartScriptName + ".";
  grammar.geom = $('#geomSelect').val();
  grammar.coord = $('#coordSelect').val();
  grammar.faced = $('#facetSelect').val();
  geom_attributes.map(function(attr){
    grammar[attr] = $('#' + attr + "attr").val();
  });
  
  grammarScript = grammarScript + grammar.geom + "()";
  geom_attributes.map(function(attr){
    if (grammar[attr].length > 0) {
      grammarScript = grammarScript + "." + attr + "('" + grammar[attr].join("*") + "')";
    }
  });
  
  if (grammar.coord) {
    grammarScript = grammarScript + ";n " + chartScriptName + "." + "coord('" + grammar.coord + "');";
  } else {
    rammarScript = grammarScript + ";";
  }
  
  if ( grammar.faced ) {
    if ( grammar.faced.length == 1 ||
        grammar.faced.length == 2 ) {
      grammarScript = getFacet(grammar.faced, grammarScript);
    }
  }
  
  console.log(grammarScript)
  return grammarScript;
}

这里有几点要在意:

  • 利用JS的模板字符串能够使得的布局代码片段
  • 接纳eval奉行协会好的语法驱动的代码来响应select的change事件,以博取卓绝的交互性。在生产条件,要注意该措施的安全性祸患,因为纯前端,eval能拉动的威迫十分小,生产中,能够把这些实行放在安全的沙箱中运营
  • 你必要明白图形语法,并不是大肆的结合都能使得出有效的图片。

此间对于select2的多选,有贰个小的提醒,在缺省气象下,多选的依次是固定的依次,并不相信任选取的次第,但是不菲图纸语法和字段的顺序有关,所以大家应用如下的主意来对症用药select的精选事件。

function updateSelect2Order(evt) { let element = evt.params.data.element; let $element = $(element); $element.detach(); $(this).append($element); $(this).trigger("change"); }

1
2
3
4
5
6
7
function updateSelect2Order(evt) {
  let element = evt.params.data.element;
  let $element = $(element);
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
}

那般做就是每便选中后,把方今入选的品种移到数码最后之处。

 

js代码:

Car数据集折线图

图片 6

图表语法:

g2chart.line().position('id*speed');

1
g2chart.line().position('id*speed');

切换成极坐标:

图片 7

图表语法:

g2chart.line().position('id*speed'); g2chart.coord('polar');

1
2
g2chart.line().position('id*speed');
g2chart.coord('polar');

 

复制代码 代码如下:

伯克利数据饼图

图片 8

数码处理:

SELECT SUM(Freq) as f , Gender FROM table GROUP BY Gender

1
SELECT SUM(Freq) as f , Gender FROM table GROUP BY Gender

图形语法:

g2chart.intervalStack().position('f').color('Gender').label('f'); g2chart.coord('theta')

1
2
g2chart.intervalStack().position('f').color('Gender').label('f');
g2chart.coord('theta')

 

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:基于jquery自定义图片热区效果,用500行纯前端代

关键词:

上一篇:5分钟学一学Web,是个什么样的东西

下一篇:没有了