在條形圖Highchart點擊事件上獲取X軸值

Question

好吧，我有一個條形圖Highchart顯示一些分數，當我點擊一個情節系列時，我想得到的是x軸值（用戶ID）。

進行一些研究，當我點擊圖表背景時我能夠顯示x軸值（我使用console.log來顯示這些數據），但我無法點擊任何情節系列（彩色條）

這是片段：

 var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"]; var prcs=[2,12,13,11,15]; Highcharts.chart('container', { chart: { type: 'bar', events:{ click: function(te){ console.log(prcs[Math.round(te.xAxis[0].value)]); } } }, title: { text: null }, credits: { enabled: false }, xAxis: { categories: cats, lineColor: '#FFFFFF', tickColor: 'transparent', labels: { align: 'left', x: 0, y: -12, style: { textOverflow: 'none', width:'300px', whiteSpace:'normal'//set to normal } } }, yAxis: { min: 0, title: { text: null, }, labels: { enabled: false } }, legend: { enabled: false //reversed: true }, plotOptions: { series: { stacking: 'normal', dataLabels: { enabled: true, align: 'left', color: '#FFFFFF', x: 0 }, events:{ click: function(te){ console.log(this.name); } } //pointPadding: 0, //groupPadding: 0 }, bar:{ } }, series: [{ name: 'High', color: '#009900', data: [0,1,0,1,0] }, { name: 'Mid', color: '#FFCC66', data: [4,3,0,1,1] }, { name: 'Low', color: '#FF6666', data: [4,4,5,1,0] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 210px"></div> 

同樣在jsFiddle中： http ： //jsfiddle.net/29vfsc4t/5/

如果你點擊背景你將獲得用戶ID，點擊任何欄你將得到“得分”，我需要的是當我點擊一個欄時獲得用戶ID。

Answer 1

你應該捕捉point.event代替chart.event獲得分數的x軸類別：

  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        align: 'left',
        color: '#FFFFFF',
        x: 0
      },
      point: {
        events: {
          click: function(te) {
            console.log(this.category);
            console.log(this.x);
          }
        }
      }
    },
    bar: {}
  },

請注意對console.log(this.category)的更改以顯示xAxis名稱。