<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 0,
x: 50,
floating: true,
borderWidth: 1,
itemHoverStyle: {
color: '#FF0000'
}
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
//backgroundColor: {
//linearGradient: [0, 0, 0, 60],
//stops: [
//[0, '#FFFFFF'],
//[1, '#E0E0E0']
//]
//},//显示层背景颜色
shared: true,
crosshairs: true,
formatter: function() {
return ''+
this.x +': '+ this.y +' units';
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick :function(event) {
var seriesObj = chart.series;
for(var i=0;i<seriesObj.length;i++) {
if(this.name==seriesObj[i].name) {
if(this.visible) {
this.show();
}
}else {
seriesObj[i].hide();
}
}
}
/* show: function(event) {
var o =chart.series;
for(var i=0; i< o.length; i++) {
if(this.name != o[i].name) {
if(o[i].visible) {
o[i].hide();
}
}
}
},hide: function(event) {
var o =chart.series;
for(var i=0; i< o.length; i++) {
if(this.name != o[i].name) {
if(o[i].visible) {
}else {
o[i].show();
}
}
}
}
*/
},
//color: '#FF0000',//颜色
//lineColor: '#ff0000', //线条颜色
animation: {
duration: 10000 //延迟加载
},
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
states: {
hover: {
fillColor:'red',
//lineColor: 'black',
lineWidth: 1,
radius: 4
}
}
}
},
fillColor: {
//区域颜色淡化
//linearGradient: [0, 0, 0, 300],
//stops: [
//[0, Highcharts.getOptions().colors[0]],
//[1, 'rgba(2,0,0,0)']
//]
}
},
series: [{
name: 'John',
data: [12,12, 12, 8, 8, 8, 8]
},{
name: 'Tom',
data: [10, 10, 10, 7, 7, 7, 7],
visible : false
},{
name: 'Jerry',
data: [7, 7, 7, 5, 5, 5, 5],
visible : false
}]
});
});
$button =$('#button');
$button.click(function() {
//debugger;
//alert(1);
var series = chart.series;
for(var i=0;i<series.length;i++) {
if(series[i].name == 'Tom') {
series[i].remove();
}
}
// if (series.visible) {
// series.hide();
// $button.html('Show series');
// } else {
// series.show();
// $button.html('Hide series');
// }
});
$button =$('#button1');
$button.click(function() {
var istrue = true
var series = chart.series;
for(var i=0;i<series.length;i++) {
if(series[i].name == 'Tom') {
istrue = false;
}
}
if(istrue) {
chart.addSeries({name:'Tom',
data: [10, 10, 10, 7, 7, 7, 7]
});
}
});
// if (series.visible) {
// series.hide();
// $button.html('Show series');
// } else {
// series.show();
// $button.html('Hide series');
// }
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="dark-blue.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<button id="button">remove series</button>
<button id="button1">add series</button>
</body>
</html>