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

使用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'
            }]        
        }]
    });
})

如下图:
带URL超链接的饼图-使用highcharts_第1张图片

点击饼图中的某一个部分能够打开代码中定义的网站页面

参考:
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/ (重要)

你可能感兴趣的:(前端(web,android))