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

Highcharts 点击反选的更多相关文章

  1. highcharts点击事件系列

    http://www.highcharts.com/demo/line-ajax 参考设置(bar 柱状图) plotOptions: {                series: {       ...

  2. HighCharts点击柱形或饼块等加URL或Click事件

    我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的: 如下代码: plotOptions: { pie: { cursor: 'pointe ...

  3. Highcharts 总结

    一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...

  4. jq实现全选、全不选、反选

    基本思路: 1全选:点击全选按钮的时候,将input的属性checked设置为true; 2全不选:点击全不选按钮的时候,将input的属性checked设置为false; 3反选:点击反选按钮的时候 ...

  5. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

  6. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  8. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...

  9. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

随机推荐

  1. BNU10792：沙漠旅行者

    有个旅行者计划横穿沙漠,沙漠中水资源很匮乏.旅行者需要依靠补给站的支持,才能横穿整个沙漠.假设所有的补给站都在一条直线上,而且旅行者一定沿着这条直线走.起点在1号补给站,终点在第N号补给站,起点和终点 ...

  2. Linux内核ROP学习

    0x00 前言 1.SMEP(Supervisor Mode Execution Protection):一种减缓内核利用的cpu策略,禁止内核态到用户态内存页的代码执行(32位的addresses ...

  3. Excel01-不同的单元格输入同一数据

    第一步:按住Ctrl键,选择不同的单元格 第二步:选择完最后一个单元格后,输入需要的数据“YES”,按Ctrl+Enter键结束. 提示:按Ctrl+; 输入当前日期,再按ctrl+Enter实现全部 ...

  4. vmstat

    vmstat(virtual memory statitics)命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况, ...

  5. linux stat命令

    在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...

  6. input text输完自动跳到下一个

    应用场景: 短信验证码输入 效果: input输入框,输入完以后自动跳转到下一个 思路: 四个输入框 进入聚焦到第一个输入框 第一个输入框输完一个字符后自动聚焦到下一个输入框 1.四个输入框 < ...

  7. VCS仿真查看coverage

    VCS仿真查看coverage Design compiler & simulate #!/bin/csh -f setenv NOVAS_HOME /EDASynopsys/verdi3-I ...

  8. C#异步编程的实现方式——ThreadPool线程池

    在需要创建的线程很多,且都是比较小的线程的情况下,可以使用线程池(ThreadPool类).ThreadPool是一个静态方法,提供了对一个线程集合的操作,它会在线程数不足时增加线程,空闲线程数过多时 ...

  9. PHP扩展开发（3）-config.m4

    1. 宏命令 1.1. dnl 注释      1.2. 扩展的工作方式           1.2.1) PHP_ARG_WITH不需要第三方库           1.2.2) PHP_ARG_E ...

  10. Histogram Equalization

    转载请注明出处. Histogram Equalization 也就是直方图均衡化, 是一种常用的通过直方图处理来增强图像的方法. 对于一副灰度图像,其像素范围一般在0~255之间,我们记nk(0&l ...