关于highchart的一个学习例子 -

Jerry__xie

浏览: 15220 次
性别:

最近访客更多访客>>

caolinlin

loki888

hpxl

domch2000

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

关于highchart的一个学习例子

<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>