HighCharts点击柱形或饼块加URL或Click事件

最新推荐文章于 2022-10-11 11:14:35 发布

转载最新推荐文章于 2022-10-11 11:14:35 发布 · 1.6k 阅读

jQuery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Highcharts中为饼图和柱状图的数据点设置点击事件及链接，通过配置plotOptions和series选项实现数据交互。

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

我们在做图表的时候，有时候需要在单个数据上加链接或点击事件，是在plotOptions里的events里设置的

01
plotOptions:
 {

02
    pie:
 {

03
        cursor: 'pointer',

04
        events:
 {

05
            click: function(e)
 {

06
        location.href
 = e.point.url;<span></span> //上面是当前页跳转，如果是要跳出新页面，那就用

07
                //window.open(e.point.url);

08
                //这里的url要后面的data里给出

09
        }

10
    },

11
    }

12
},

13
series:
 [{

14
    data:
 [

15
        {name:'地产组',y:76,url:'http://www.baidu.com'},

16
   
     {name:'能源组',y:54,url:'<span></span>http://www.google.com<span></span>'},<span></span>
             {

17
   
     {name:'互联网',y:20,url:'http://www.sohu.com'}

18
}]

以上是针对饼图的，如果是柱形图那就把pie:{}换成column : {}

当然如果换成series:{}那就不用管是饼图还是柱形图或是其他图形了

01
plotOptions:
 {

02
    series:
 {

03
        cursor: 'pointer',

04
        events:
 {

05
            click: function(e)
 {

06
        location.href
 = e.point.url;

07
                //上面是当前页跳转，如果是要跳出新页面，那就用

08
                //window.open(e.point.url);

09
                //这里的url要后面的data里给出

10
        }

11
    },

12
    }

13
},

14
series:
 [{

15
    data:
 [

16
        {name:'地产组',y:76,url:'http://www.baidu.com'},

17
        {name:'能源组',y:54,url:'http://www.google.com'},            
 {

18
        {name:'互联网',y:20,url:'http://www.sohu.com'}

19
}]