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& ...
随机推荐
- 从客户端检测到危险的Request.Form值解决方案
1.修改aspx页面中的代码,设置ValidateRequest="false" <%@ Page Language="C#" AutoEventWire ...
- SQlserver表连接
连接是两元运算,可以对两个或多个表进行查询,结果通常是含有参加连接运算的两个表或多个表的指定列的表. 在T-SQL中,连接查询有两类: 第一类:符合SQL标准的连接谓词表示形式: 第二类:T-SQL扩 ...
- DX笔记之六------游戏画面绘图之透明特效的制作方法
原文链接:http://blog.csdn.net/zhmxy555/article/details/7338082 透明效果 由于所有的图文件都是以矩形来储存的,我们也许会需要把一张怪兽图片贴到窗口 ...
- HTML5画布(阴影)
案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...
- javascript字符类型操作函数
//获取字符串的长度 String.prototype.getByteLength = function() { var bytes=0,i=0; for (; i<this.length; + ...
- 40条优化php代码的小实例
1.如果一个方法能被静态,那就声明他为静态的,速度可提高1/4; 2.echo的效率高于print,因为echo没有返回值,print返回一个整型; 3.在循环之前设置循环的最大次数,而非在在循环中; ...
- python之6-1常用函数
1.休眠函数 import time time.sleep(n) n可以是整数或者小数,单位是秒 2.打开文件函数 open('n','m',k) n是文件路径,如果只有文件名,则是py程序所在文件夹 ...
- Python Udp Socket
socket(套接字),传输层通信的端点,由IP和端口号组成(IP,Port),可以通过socket精确地找到服务器上的进程并与之通信 python2.6实现,基于AF_INET(网络套接字) 类型S ...
- Excel文件数据保存到SQL中
1.获取DataTable /// <summary> /// 查询Excel文件中的数据 /// </summary> /// <param name="st ...
- eclipse安装lombok插件
1:下载jar https://projectlombok.org/download.html 2:双击下载的lombok.jar 安装 3:如果eclipse没有安装到默认目录,需要手动选择ecli ...