试图制造一个弹出点击图表时。弹出一个关闭按钮 [英] Trying to produce a pop up when the chart is clicked. The pop up is a close button
本文介绍了试图制造一个弹出点击图表时。弹出一个关闭按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想，当用户点击一个栏上产生一个弹出的highcharts。
到目前为止，我有code，当用户点击一个栏上它消失的所有其他酒吧。我想被选择来产生一个小的弹出这样的吧。
![在这里输入的形象描述](\"http://i.stack.imgur.com/zmHop.png\")
当它应该突出酒吧和酒吧都恢复到正常状态。
下面是我的code
JavaScript的
$（函数（）{
$（'＃container4'）。highcharts（{
图：{
类型：列，
事件：{
点击：功能（E）{
的console.log（E）;
}，
选择：功能（E）{
的console.log（E）;
}
}
}，
标题：{
文字：''
}，
传说：{
启用：假的
}，
出口：{
启用：假的
}，
学分：{
启用：假的
}，
X轴：{
gridLineColor：''，
标签： {
启用：假的
}
}，
Y轴：{
标题：{
文字：'水果'
}，
可见：假的
}，
学分：{
启用：假的
}，
plotOptions：{
/ *系列：{
allowPointSelect：真实，
状态： {
选择： {
颜色：'蓝'，
}
}
} * /
列：{
堆叠：正常，
}
}，
系列：[{
名称： ''，
数据：[-40，-60，-70，-80，-90，-100，-100，-100，-100，-100，-100]
门槛：0，
颜色：＃E0E0E0'，
enableMouseTracking：假的，
}，{
名称： ''，
数据：[-60，-40，-30，-20，-10，0，10，20，30，40，50]，
门槛：0，
颜色：绿色，
negativeColor：'红'，
}]
}）;
}）;$（文件）。在（'点击'，'.highcharts跟踪器RECT'，函数（）{
VAR榆树= $（本）;
如果（！elm.attr（类））{
$（'highcharts跟踪器RECT。'）removeAttr（类）的CSS（'不透明'，0.5）。 elm.attr（类，主动），CSS（'不透明'，1）;
}其他{
。$（'。highcharts-RECT跟踪'）removeAttr（类）的CSS（'不透明'，1）;
}
}）;
CSS
.highcharts系列RECT {
过渡：所有.3s缓解;
}
HTML
＆LT;脚本SRC =HTTPS：//$c$c.jquery.com/jquery-2.1.4.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.highcharts.com/highcharts.js＆GT;＆下; /脚本＆GT;
＆LT; DIV ID =container4＆GT;＆LT; / DIV＆GT;
解决方案
\r
\r\r
\r $（函数（）{\r
$（'＃container4'）。highcharts（{\r
图：{\r
类型：列，\r
事件：{\r
点击：功能（E）{\r
的console.log（E）;\r
}，\r
选择：功能（E）{\r
的console.log（E）;\r
}\r
}\r
}，\r
标题：{\r
文字：''\r
}，\r
传说：{\r
启用：假的\r
}，\r
出口：{\r
启用：假的\r
}，\r
学分：{\r
启用：假的\r
}，\r
X轴：{\r
gridLineColor：''，\r
标签： {\r
启用：假的\r
}\r
}，\r
Y轴：{\r
标题：{\r
文字：'水果'\r
}，\r
可见：假的\r
}，\r
学分：{\r
启用：假的\r
}，\r
plotOptions：{\r
/ *系列：{\r
allowPointSelect：真实，\r
状态： {\r
选择： {\r
颜色：'蓝'，\r
}\r
}\r
} * /\r
列：{\r
堆叠：正常，\r
}\r
}，\r
系列：[{\r
名称： ''，\r
数据：[-40，-60，-70，-80，-90，-100，-100，-100，-100，-100，-100]\r
门槛：0，\r
颜色：＃E0E0E0'，\r
enableMouseTracking：假的，\r
}，{\r
名称： ''，\r
数据：[-60，-40，-30，-20，-10，0，10，20，30，40，50]，\r
门槛：0，\r
颜色：绿色，\r
negativeColor：'红'，\r
}]\r
}）;\r
}）;\r
\r
$（文件）。在（'点击'，'.highcharts跟踪器RECT'，函数（）{\r
VAR榆树= $（本）;\r
如果（！elm.attr（类））{\r
$（'highcharts跟踪器RECT。'）removeAttr（类）的CSS（'不透明'，0.5）。\r
elm.attr（类，主动），CSS（'不透明'，1）;\r
\r
$（'＃指针）。显示（）。\r
偏移量（{顶：elm.offset（）前30，左起：elm.offset（）左+ 10}）\r
\r
}\r
}）;\r
\r
$（'＃指针）。点击（函数（）{\r
。$（'。highcharts-RECT跟踪'）removeAttr（类）的CSS（'不透明'，1）;\r
$（本）.hide（）\r
}）\r
\r
\r
.highcharts系列RECT {\r
过渡：所有.3s缓解;\r
}\r
\r
＃指针{\r
高度：30ph;\r
宽度：10px的;\r
显示：没有人;\r
背景色：蓝色;\r
} \r
＆LT;脚本SRC =HTTPS：//$c$c.jquery。 COM / jQuery的-2.1.4.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =HTTP：//$c$c.highcharts.com/highcharts.js＆GT;＆下; /脚本＆GT;\r
＆LT; DIV ID =container4＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV ID =指针＆GT; X＆LT; / DIV＆GT; \r
I'm trying to produce a pop up in highcharts when the user clicks on a bar. So far I have the code that when a user clicks on a bar it fades all the other bars. I want the bar that is selected to produce a small pop up above the bar like this
when the close is selected it should highlight the bar and return all bars to normal state.
Here's my code
javascript
$(function() {
$('#container4').highcharts({
chart: {
type: 'column',
events: {
click: function(e) {
console.log(e);
},
selection: function(e) {
console.log(e);
}
}
},
title: {
text: ''
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
gridLineColor: '',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Fruit'
},
visible: false
},
credits: {
enabled: false
},
plotOptions: {
/*series: {
allowPointSelect: true,
states: {
select: {
color: 'blue',
}
}
},*/
column: {
stacking: 'normal',
}
},
series: [{
name: '',
data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
threshold: 0,
color: '#E0E0E0 ',
enableMouseTracking: false,
}, {
name: '',
data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
threshold: 0,
color: 'green',
negativeColor: 'red',
}, ]
});
});
$(document).on('click', '.highcharts-tracker rect', function() {
var elm = $(this);
if (!elm.attr('class')) {
$('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);
elm.attr('class', 'active').css('opacity', 1);
} else {
$('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
}
});
css
.highcharts-series rect {
transition:all .3s ease;
}
html
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>
解决方案
$(function() {
$('#container4').highcharts({
chart: {
type: 'column',
events: {
click: function(e) {
console.log(e);
},
selection: function(e) {
console.log(e);
}
}
},
title: {
text: ''
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
gridLineColor: '',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Fruit'
},
visible: false
},
credits: {
enabled: false
},
plotOptions: {
/*series: {
allowPointSelect: true,
states: {
select: {
color: 'blue',
}
}
},*/
column: {
stacking: 'normal',
}
},
series: [{
name: '',
data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
threshold: 0,
color: '#E0E0E0 ',
enableMouseTracking: false,
}, {
name: '',
data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
threshold: 0,
color: 'green',
negativeColor: 'red',
}, ]
});
});
$(document).on('click', '.highcharts-tracker rect', function() {
var elm = $(this);
if (!elm.attr('class')) {
$('.highcharts-tracker rect').removeAttr('class').css('opacity', 0.5);
elm.attr('class', 'active').css('opacity', 1);
$('#pointer').show().
offset({top:elm.offset().top-30, left:elm.offset().left+10})
}
});
$('#pointer').click(function(){
$('.highcharts-tracker rect').removeAttr('class').css('opacity', 1);
$(this).hide()
})
.highcharts-series rect {
transition:all .3s ease;
}
#pointer{
height:30ph;
width:10px;
display:noone;
background-color:blue;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>
<div id="pointer">x</div>
这篇关于试图制造一个弹出点击图表时。弹出一个关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
