设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

hightcharts柱状图click事件深入研究

2013-11-22 14:52:00.0 js  
导读:柱状图的json数据:data = {categories:["小学一年级1班","小学一年级2班"],        series:[                {name:"0-20",data:[10,30],urls:[1,2]},                {name:"20-40",data:[20,31],urls:[3,4]},                {name:"...。。。

柱状图的json数据:

data = {categories:["小学一年级1班","小学一年级2班"],
        series:[
                {name:"0-20",data:[10,30],urls:[1,2]},
                {name:"20-40",data:[20,31],urls:[3,4]},
                {name:"40-60",data:[25,30],urls:[5,6]},
                {name:"60-80",data:[40,35],urls:[7,8]},
                {name:"80-100",data:[20,60],urls:[9,10]}
               ]};

其中0-20中,data[0]=10对应小学一年级1班,data[1]=30对应小学一年级2班,urls[0]对应用户点击小学一年级1班的柱状图时的url后面的同理。

事件处理函数的设置:

plotOptions: {
                column: {
                 cursor: 'pointer',
                 groupPadding:0.1,
                 pointPadding :0.1,
                 events:{click:function(e){
                         if(callbackClickEvent) {
                          callbackClickEvent(e);
                         }
                       }},
                       dataLabels: {
                           enabled: true
                       }
                   }
               },
               series: data

callbackClickEvent函数如下:

function callbackClickEvent(e) {
    var urls = e.point.series.userOptions.urls[e.point.x];// 我们可以使用这些属性来获得用户点击的柱子对应url的值
   }

效果图:

 

关于event的其他属性:

 

 

(编辑: liuhui_306)

网友评论
相关文章