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/时看到的用户列表,不能够直接点击某个链接然后查看 ...
随机推荐
- tkinter学习1
GUI 用户交互界面 tkinter 介绍 tkinter是 python自带的gui库,对图像处理库tk的封装 #导入tkinter库 import tkinter #创建主窗口对象 root = ...
- [BUG]微信浏览器 iOS input 失焦页面不回弹
描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...
- 个人项目(Word Count)
一.Github项目地址 https://github.com/AllForward/GP_Homework/tree/master/个人项目 二.题目叙述 这个项目要求写一个命令行程序,模仿已有wc ...
- NIO中的ZeroCopy
前文提到网络IO可以使用多路复用技术,而文件IO无法使用多路复用,但是文件IO可以通过减少底层数据拷贝的次数来提升性能,而这个减少底层数据拷贝次数的技术,就叫做ZeroCopy. 操作系统层面的Zer ...
- linux环境下安装可操作图库语言Gremlin的图框架HugeGraph
原创/朱季谦 图数据库是一项比较前沿而逐渐热门的技术,是NoSql数据库的一种,它应用图形理论存储实体之间的关系信息,最主要的组成有两种,结点集和连接结点的边.常见的图数据库有Neo4j,Januas ...
- Apex_2. LiveBos两个时间求相差天数、历时
(1)获取两个时间相差天数(没有上午下午区分) var d1=ABS_DATESTRING(FStartTime,'yyyy/MM/dd'); var d2=ABS_DATESTRING(FEndTi ...
- 【简说Python WEB】Web应用部署
目录 [简说Python WEB]Web应用部署 应用层 缓存层 数据层 Gunicorn 的应用 1.安装Gunicorn 2.Gunicorn的启动 Nginx 的应用 1.docker方式部署安 ...
- Spring MVC系列-(3) Bean的装配
3. 高级装配Bean 3.1 Bean的作用域 默认情况下,Spring中的bean都是以单例的形式存在的,无论注入多少次,每次注入的都是同一个实例. 考虑到某些bean可能是可变的,Spring定 ...
- Mysql性能优化：什么是索引下推？
导读 索引下推(index condition pushdown )简称ICP,在Mysql5.6的版本上推出,用于优化查询. 在不使用ICP的情况下,在使用非主键索引(又叫普通索引或者二级索引)进行 ...
- TPYBoard v202开发板通过I2C协议驱动oled
最近无聊的时候研究了一下TPYBoard v202开发板,发现网上TPYBoard开发驱动oled的这块资料比较少,本人测试成功后给大家分享一下经验 下面通过代码讲解一下 1.首先需要导包, 在网上下 ...