以下是代码:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
</script>
</body>
</html>
jsfiddle linke是: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-stacked/
我希望通过点击某个按钮来实现,或者我想一次隐藏多个对象。
答案 0 :(得分:2)
添加<button id="btn">Hide series</button>
然后单击该按钮的监听器,该监听器根据Highcharts图的状态,打开或关闭数据系列的可见性。
var $btn = $('#btn');
var myChart = $('#container').highcharts(); // get higcharts object
$btn.on('click', function() {
if(myChart.series[0].visible && myChart.series[1].visible) {
myChart.series[0].hide();
myChart.series[1].hide();
$btn.html('Show series');
} else {
myChart.series[0].show();
myChart.series[1].show();
$btn.html('Hide series');
}
});
请参阅此JSFiddle:http://jsfiddle.net/byrz56pk/以获取工作示例。