Highcharts 点击反选

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

<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

</textarea></li>
                <li class="con css"><textarea id="css"></textarea></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript" src="http://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://img.hcharts.cn/highcharts/highcharts.js"></script>

    <script type="text/javascript" src="http://static.hcharts.cn/code/js/common.js"></script>
    <script type="text/javascript" src="http://static.hcharts.cn/code/js/codemirror.js"></script>
    <script type="text/javascript" src="http://static.hcharts.cn/code/js/javascript.js"></script>
    <script type="text/javascript" src="http://static.hcharts.cn/code/js/xml.js"></script>
    <script type="text/javascript" src="http://static.hcharts.cn/code/js/css.js"></script>
    <script type="text/javascript">
        var chart = null;
        var js = null;
        var html = null;
        var css = null;
         autoSize();
        table("result");

        $(".result_tables").find(".table").click(function(){
            var cla = $(this).data("index");
            table(cla);
        });
        window.onresize = autoSize;

        function loadResult(chart) {
            if(chart==null) {
               $(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';
};
            } else {
               chart.reflow();
            }
            return chart;
        }

    </script>
</body>
</html>