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& ...
随机推荐
- cocos2d-x 3.0 画图节点——Node
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- WSAWaitForMultipleEvents()
简述:只要指定事件对象中的一个或全部处于有信号状态,或者超时间隔到,则返回. #include <winsock2.h> DWORD WSAAPI WSAWaitForMultipleEv ...
- Java调用天气Webservice的小应用
废话不多说,直接贴代码: CityReq.java package com.weather; import javax.xml.bind.annotation.XmlElement; import j ...
- rpm包安装
RPM全称是“RedHatPackageManager”是由RedHat公司发发展起来的,本质是将软件源码包经过编译并且打包成rpm的格式,rpm文件包含的有二进制文件,配置文件,库文件等,同时RPM ...
- 网页JavaScript1
DOM的操作 windows对象操作 属性: opener,打开当前窗口的源窗口,首次启动 是null. dialogArgument,对话框的返回值 子对象: history , location ...
- Log4net日志组件使用
一.简介 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的日志系统来诊断和修复配置上的问题.经验表明,日 ...
- 随机获取oracle数据库中的任意一行数据(rownum)
最近看oracle资料的时候,了解rownum的概念,以前只知道对数据库表进行简单的增删改查: 看到了rownum的概念后,突然想到了好多业务场景应该都可以适用的,比如在进行随机发奖的时候, 我们就可 ...
- Xcode使用xib拖线时出现: could not insert new outlet connection
解决方法: 1.在新建类的时候没有选择将这个类加入到对应的"Target"中. 2.重新将文件加入项目 操作步骤就是选中出问题的.m和.h文件,点删除键,然后选"Remo ...
- title滚动
代码: <html><head><title>滚动的文字在TITLE栏上不停滚动</title><script language=javascri ...
- Java系列--第八篇 基于Maven的SSME之定时邮件发送
关于ssme这个我的小示例项目,想做到麻雀虽小,五脏俱全,看到很多一些web都有定时发送邮件的功能,想我ssme也加入一下这种功能,经查询相关文档,发现spring本身自带了一个调度器quartz,下 ...