hicharts中treemap添加超链接
2024-08-26 08:27:12
<!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个统计小项也分别有着不同的超链接。
最新文章
- python 的重载
- sqlserver巧用row_number和partition by分组取top数据
- max_allowed_packet自动恢复
- memcached完全剖析–1. memcached的基础
- stm32 usb数据接收与数据发送程序流程分析
- C语言字符串库函数的实现
- JS 清除IE缓存
- jquery load(URL,FUNCTION(){}) 异步加载页面
- DEP受保护的问题（尤其是Outlook）
- android邮件发送几种方式
- UrlRouting的理解
- JS学习之路，菜鸟总结的注意事项及错误更正
- String类的两种赋值
- YYHS-NOIP模拟赛-gcd
- 【原】eclipse创建maven工程时，如何修改默认JDK版本？
- java高精度学习笔记
- Gym-100451B：Double Towers of Hanoi
- （转）轻松学，Java 中的代理模式及动态代理
- 上Google Adsense个人的一点体验
- weblogic新漏洞学习cve-2017-10271
热门文章
- mongo复制数据库和表
- javaScript 基础知识汇总 （十四）
- Clipboard.SetText()卡住问题
- Natas18 Writeup（Session登录，暴力破解）
- JavaScript零宽字符
- tomcat启动时间5分钟左右org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [342,445] milliseconds.
- SpringMVC框架——自定义数据类型转换器
- HBU-数据库第五周作业
- 说两个我在工作中有价值的bug
- ModelForm理解简单运用（增删改查）