目录
分享
尝试在单击图表时生成弹出窗口。弹出窗口是一个关闭按钮
浏览量:92
编辑于:2022-12-17 15:54:13
我正在尝试在用户单击条形图时在高图表中生成弹出窗口。 到目前为止，我有这样的代码，当用户单击一个栏时，它会淡化所有其他条形图。我希望选择的栏在栏上方产生一个小弹出窗口，如下所示
选择收盘价后，它应突出显示柱线并将所有柱线返回到正常状态。
这是我的代码
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>
