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>
Highcharts 点击反选的更多相关文章
- highcharts点击事件系列
http://www.highcharts.com/demo/line-ajax 参考设置(bar 柱状图) plotOptions: { series: { ...
- HighCharts点击柱形或饼块等加URL或Click事件
我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的: 如下代码: plotOptions: { pie: { cursor: 'pointe ...
- Highcharts 总结
一.Highcharts series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...
- jq实现全选、全不选、反选
基本思路: 1全选:点击全选按钮的时候,将input的属性checked设置为true; 2全不选:点击全不选按钮的时候,将input的属性checked设置为false; 3反选:点击反选按钮的时候 ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- jQuery实现的全选、反选和不选功能
适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...
- Android中购物车的全选、反选、问题和计算价格
此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...
- jquery实现全选、全不选、反选、获取选中的所有值总结
HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...
随机推荐
- 使用java连接AD域,验证账号password是否正确
web项目中有时候客户要求我们使用ad域进行身份确认,不再另外做一套用户管理系统.事实上客户就是仅仅要一套账号能够訪问全部的OA.CRM等办公系统. 这就是第三方验证.一般有AD域,Ldap,Radi ...
- BNU10792:沙漠旅行者
有个旅行者计划横穿沙漠,沙漠中水资源很匮乏.旅行者需要依靠补给站的支持,才能横穿整个沙漠.假设所有的补给站都在一条直线上,而且旅行者一定沿着这条直线走.起点在1号补给站,终点在第N号补给站,起点和终点 ...
- php增删改查,自己写的demo
1.链接数据库通用方法:conn.php <?php //第一步:链接数据库 $conn=@mysql_connect("localhost:3306","root ...
- Qt 域名转成IP
#include <stdio.h>#include <stdlib.h>#include <netdb.h>#include <arpa/inet.h> ...
- CSS 特殊样式设置集合
1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute; 第二个子块设置margin-left即 ...
- prototype vs __proto__ 之间关系
__proto__ is the actual object that is used in the lookup chain to resolve methods, etc. __proto__是解 ...
- 使用F#开发量化模型都缺什么?
量化模型多数是基于统计的,因此,统计运算库应该是必备的.在Matlab.R中包含了大量的统计和概率运算,可以说拿来就用,非常方便,相比之下,F#的资源就很少了,这里给大家提供几个链接,可以解决一部分问 ...
- Java ----------- 正则表达式(更新中。。。。。。)
RegEx:Regular Expression. 元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\ ...
- permission is only granted to system apps--Android manifest权限问题
在android的manifest.xml下编辑如下代码:<uses-permission android:name="android.permission.INTERNET" ...
- Oracle物理结构与逻辑结构
有一张图能非常清晰的表示出Oracle物理结构与逻辑结构的区别:如下图: 对上图的解释:每个数据库都必须由一个或多个表空间组成.(一对多关系)每个表空间都必须由一个或多个数据文件(data fil ...