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/时看到的用户列表,不能够直接点击某个链接然后查看 ...
随机推荐
- element中的树形组件，如何获取父级菜单的id
一般多选的树形组件,使用getCheckedNodes()方法只能获取到本级的菜单id,只有在子菜单全部选中的情况下才会选中上级.但我们想要不全选中子级的情况下也要获取它的上级,甚至上上级等,怎么办呢 ...
- [译]ABP框架v2.3.0已经发布！
在新冠病毒的日子里,我们发布了ABP框架v2.3, 这篇文章将说明本次发布新增内容和过去的两周我们做了什么. 关于新冠病毒和我们的团队 关于冠状病毒的状况我们很难过.在Volosoft的团队,我们有不 ...
- 【Weiss】【第03章】练习3.3：通过交换指针交换单/双链表元素
[练习3.3] 通过之调整指针(而不是数据)来交换两个相邻的元素,使用 a.单链表 b.双链表 Answer: 先放测试代码,折叠标题可以看到分别是哪种链表的测试. 实测可满足题意,但单链表和双链表的 ...
- 第三届上海市大学生网络安全大赛 流量分析 WriteUp
题目链接: https://pan.baidu.com/s/1Utfq8W-NS4AfI0xG-HqSbA 提取码: 9wqs 解题思路: 打开流量包后,按照协议进行分类,发现了存在以下几种协议类型: ...
- Shell：sed用法 - 查找并替换字符串
原文链接 语法 sed 's/serach_str/replace_str/g' file_path 在某个文件中查找所有的serach_str并替换为replace_str 参数 描述 serach ...
- Comparing Data-Independent Acquisition and Parallel Reaction Monitoring in Their Abilities To Differentiate High-Density Lipoprotein Subclasses 比较DIA和PRM区分高密度脂蛋白亚类的能力 （解读人：陈凌云）
文献名:Comparing Data-Independent Acquisition and Parallel Reaction Monitoring in Their Abilities To Di ...
- 【面试QA】Attention
目录 Attention机制的原理 Attention机制的类别 双向注意力 Self-Attention 与 Soft-Attention 的区别 Transformer Multi-Head At ...
- 使命召唤:战区国际服ID注册与登录
命召唤:战区 国际服ID注册与登录 1.下面官网网页注册国际服账号.2登录游戏.就这么简单.(前提是网咖.电竞宾馆.已经提供好游戏) !!!注意 如果是网吧网咖电竞宾馆,用其给你提供的游戏图标进入游 ...
- Javascript之实现页面倒计时效果
本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...
- PS2手柄在arduino上进行测试，可用，供喜欢diy的朋友借鉴
#include <PS2X_lib.h> //PS2手柄PS2X ps2x; // create PS2 Controller Class//////////PS2引脚///////// ...