Customized-legendIte | JShare

$(function () {
	$('#container').highcharts({
		title : {
			text : 'Customized legengItemClick Event'
		},
        plotOptions : {
            line : {
                events : {
                    legendItemClick : function(event) {
                        var series = this.chart.series;
                        var mode = getVisibleMode(series, this.name);
                        var enableDefault = false;
                        if (!this.visible) {
                        	enableDefault = true;
                        }
                        else if (mode == 'all-visible') {
							$.each(series, function(k, serie) {
								serie.hide();
							});
							this.show();
						}
						else if (mode == 'all-hidden') {
							$.each(series, function(k, serie) {
								serie.show();
							});
						}
						else {
							enableDefault = true;
						}
                        return enableDefault;
                    }
                }
            }
        },
		series : generateRandomSeries()
    });
});

function generateRandomSeries() {
	var series = [];
    for (var i = 0; i < 4; i++) {
    	var data = new Array();
        for (var j = 0; j < 10; j++) {
        	data.push(Math.random());
        }
        series.push({
            data : data
        });
    }
    return series;
};

function getVisibleMode(series, serieName) {
    var allVisible = true;
    var allHidden = true;
    for (var i = 0; i < series.length; i++) {
    	if (series[i].name == serieName)
            continue;
        allVisible &= series[i].visible;
        allHidden &= (!series[i].visible);
    }
    if (allVisible && !allHidden)
        return 'all-visible';
    if (allHidden && !allVisible)
        return 'all-hidden';
    return 'other-cases';
};

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="jquery-1.8.3.min.js"></script>
<script src="Highcharts/js/highcharts.js"></script>

</head>

<body>
	
<div id="container" style="width: 600px; height: 400px;"></div>

</body>
</html>

{"doctype":0,"resouces":"1,3","options":null,"meta":null}

Customized-legendIte | JShare

模板（查看所有模板）