带URL超链接的饼图-使用highcharts

本文介绍如何使用Highcharts实现在饼图上点击不同部分跳转至指定网页的功能,并提供具体实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用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/ (重要)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值