带URL超链接的饼图-使用highcharts
程序员文章站
2022-04-29 18:29:31
...
使用highcharts画图能够做出比较好的图表展示,有个需求是在饼图上的某一部分点击能够链接到其他页面,发现用highcharts能够实现。下面就把实现代码贴出来
点击链接(https://code.hcharts.cn/demos/hhhhDQ),然后在页面输入下面代码:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
//location.href = this.options.url;
//location.href = e.point.url
location.href = window.open(e.point.url)
}
}
}
}
},
series: [{
data: [{
y: 29.9,
url: 'http://bing.com/search?q=foo'
}, {
y: 71.5,
url: 'http://www.baidu.com'
}, {
y: 106.4,
url: 'http://www.ecnu.edu.cn'
//url: 'http://bing.com/search?q=foo+bar'
}]
}]
});
})
如下图:
点击饼图中的某一个部分能够打开代码中定义的网站页面
参考:
1. http://www.cnblogs.com/tonnytong/p/6050415.html
2. http://taoyhcoder.lofter.com/post/78393_108cf4(重要)
3. http://echarts.baidu.com/echarts2/doc/example/event.html
4. https://segmentfault.com/q/1010000006201934/a-1020000006201990
5. https://api.hcharts.cn/ (重要)