如何通过单击Highchart上的x Axis标签来调用javascript函数

时间:2014-01-22 12:09:34

标签: javascript jquery highcharts

如果您能告诉我如何通过Highchart上的xAxis标签调用java脚本函数,我将非常感谢大家。 在这下面是我的代码。 提前谢谢。

var options = {
chart: {
    renderTo: 'container',
    type: 'bar',
    backgroundColor: 'rgba(100, 100, 100, 0.2)',
    width: 1500,
    height: 800,
    ...
  },
  title: {
    ....
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
},

xAxis: {
 ....
},

yAxis:{
  ...
  },

labels: {
  style: {
      color: 'black',
      fontWeight: 'bold'
    }
  }      
},

plotOptions: {
    series: {
        stacking: 'normal'
    }
}, 

tooltip: {
....
},    

series: [] 

};

这是我如何称呼我的

  $(document).ready(function() {
     var chart = new Highcharts.Chart(options);
  });

PS:我发现这种方式通过点击标签来调用函数,但它在我的情况下不起作用

$(function () {
    $('#container').highcharts({

chart: {
    renderTo: 'container',
    type: 'bar',        
  },
  legend: {
    enabled: false
},

xAxis: {
    categories: ['chr1','chr2','chr3','chr4'],

        labels: {
            formatter: function() {
                return '<a href="http://www.w3schools.com">'+
                    this.value +'</a>';

            }
        }        
},                       
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5]
        }]
    },function(chart){

        $.each(chart.xAxis[0].ticks,function(i,tick){
            tick.label.on('click',function(){
               alert(tick.pos);
            });
        });

    });
});

Jsfiddle

1 个答案:

答案 0 :(得分:0)

这是您创建标签的行:

return '<a href="http://www.w3schools.com">'+
                this.value +'</a>';

所以你可以简单地改为:

return '<a href="#" onclick="myFun()">'+
                this.value +'</a>';

应该工作。