hicharts中treemap添加超链接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/highcharts.js"></script>
<script src="./js/heatmap.js"></script>
<script src="./js/treemap.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$('#container').highcharts({
plotOptions:{
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
window.open(this.options.url);
}
}
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: '苹果',
color: "#EC2500",
url:"http://www.baidu.com"
}, {
id: 'B',
name: '香蕉',
color: "#ECE100",
url:"http://www.comjia.com"
}, {
id: 'O',
name: '橘子',
color: '#EC9800',
url:"http://www.renren.com"
}, {
name: '小张',
parent: 'A',
value: 5,
url:"http://www.qq.com"
}, {
name: '小彭',
parent: 'A',
value: 3,
url:"http://www.163.com"
}, {
name: '小潘',
parent: 'A',
value: 4,
url:"http://www.sohu.com"
}, {
name: '香蕉1',
parent: 'B',
value: 4,
url:"http://www.360.cn"
}, {
name: '香蕉2',
parent: 'B',
value: 10,
url:"http://www.google.com"
}, {
name: '香蕉3',
parent: 'B',
value: 1,
url:"http://www.mi.com"
}, {
name: '小张',
parent: 'O',
value: 1,
url:"http://www.mop.com"
}, {
name: '小彭',
parent: 'O',
value: 3,
url:"http://www.tianya.cn"
}, {
name: '小潘',
parent: 'O',
value: 3,
url:"http://www.taobao.com"
}, {
name: '阿苏',
parent: 'wiki',
value: 2,
color: '#9EDE00',
url:"http://www.jd.com"
}]
}],
title: {
text: '水果消费情况'
}
});
</script>
</body>
</html>
运行结果：
图中的每个统计项都有不同的链接地址，在同一大的统计项香蕉项中，总的统计项和下面的3个统计小项也分别有着不同的超链接。
hicharts中treemap添加超链接的更多相关文章
- 在EXCEL中批量添加超链接
在单元格中输入函数 =HYPERLINK(链接位置,[显示文本])
- Java 在PDF 中添加超链接
对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接又可以分为:文本超链接,图像超链接,E-mai ...
- TextView中使用Linkify添加超链接
首先,在TextView所属xml配置文件中,直接添加android:autoLink特性即可,它支持一个或多个(用分割线)自定义的值:none.web.email.phone或all. 另外, ...
- C#在excel中添加超链接
1.新建一个项目 2.给项目添加引用:Microsoft Excel 12.0 Object Library (2007版本) using Excel = Microsoft.Office.Inter ...
- TextView 中添加超链接
在textView添加超链接,有两种方式,第一种通过HTML格式化你的网址,一种是设置autolink,让系统自动识别超链接,下面为大家介绍下这两种方法的实现 代码如下: 第一种 pu ...
- Flex4 中<s:Datagrid>、<mx:Datagrid>添加超链接的完整方法
<s:Datagrid>的添加超链接方法(链接文字会重叠) <s:GridColumn dataField="_fileName" headerText=&quo ...
- java中treemap和treeset实现（红黑树）
java中treemap和treeset实现(红黑树) TreeMap 的实现就是红黑树数据结构,也就说是一棵自平衡的排序二叉树,这样就可以保证当需要快速检索指定节点. TreeSet 和 Tre ...
- 给TextView添加超链接的四种方式
因为在上上篇博客中介绍了SpannableString的使用(SpannableString使用详解),由此想到给TextView添加超链接究竟有多少种方式?经过个人总结,现在一共发现四种,如果还有其 ...
- Django编写RESTful API（五）：添加超链接提高模型间的关联性
前言 在第四篇中,加入了用户模型,以及相关的认证和权限的功能.但是我们在使用的时候,会发现在访问http://127.0.0.1:8000/users/时看到的用户列表,不能够直接点击某个链接然后查看 ...
随机推荐
- 机器学习——详解经典聚类算法Kmeans
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第12篇文章,我们一起来看下Kmeans聚类算法. 在上一篇文章当中我们讨论了KNN算法,KNN算法非常形象,通过距离公 ...
- 强大的Flutter App升级功能
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 应用程序升级功能是App的基础功能之一,如果没有此功能会造 ...
- （转）ARM GNU常用汇编语言介绍
ARM GNU常用汇编语言介绍 原文地址:http://zqwt.012.blog.163.com/blog/static/120446842010445441611/ ARM汇编语言源程序语句,一般 ...
- （转）协议森林13 9527 (DNS协议)
协议森林13 9527 (DNS协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在周星驰的电影<唐伯虎点秋香> ...
- iview的input框校验添加v-modal.number会影响校验,还是依照API使用number来转换number类型
公司项目使用了iview2.0版本的,有一个需求是需要把里面的值换成number类型并且校验,代码大致如下,使用了v-modal.number来实现转换, <FormItem label=&qu ...
- Python3 + requests + unittest接口测试
一.缘 起 笔者最近完成了基于Python3 + requests + unittest的接口测试脚本,故在此做一下记录,于己为复盘,于彼为学习和参考 二.思 路 接口测试无非三步: 首先,造数据 - ...
- 推荐三款好用的JSON格式化工具——JSON-handle & HiJson & JSTool
工具一:JSON-handle JSON-Handle是一款谷歌浏览器插件. 1.访问http://jsonhandle.sinaapp.com/下载 2.打开Chrome浏览器的扩展程序(访问chr ...
- Javascript的document对象
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor / ...
- Burpsuite被动扫描流量转发插件：Passive Scan Client
编译成品:链接: https://pan.baidu.com/s/1E0vsPGgPgB9bXCW-8Yl1gw 提取码: 49eq Passive Scan Client Burpsuite被动扫描 ...
- adt-bundle环境搭建(Win7+Win10)
一.adt-bundle安装包 安装包的下载地址:http://tools.android-studio.org/index.php/adt-bundle-plugin 链接中包含有windows. ...