highcharts 如何通过单击Highchart上的x轴标签来调用java脚本函数

qvtsj1bj  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(163)

如果你能告诉我如何在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

uhry853o

uhry853o1#

这是您创建标签的行:

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

因此,您可以简单地更改为:

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

而且应该行得通。

相关问题