HighCharts onClick獲取堆積列圖表上的列數據

Question

我有一個堆積的列圖表，其中列出了列表。每列都有一個名字。

我需要的是獲取已被點擊的列的名稱。

我在系列部分有幾個警報，我想從中調用數據。

下面是代碼：

var chart; 

$(function() { 


    $.ajax({ 
     url: 'url here', 
     method: 'GET', 
     async: false, 
     success: function(result) { 

      themainData = result; 

     } 
    }); 


    var mainData = [themainData]; 
    var chlist=[]; 
    var votList=[]; 
    var comList=[]; 

    for (var i = 0; i < mainData[0].cha.length; i++) { 

    var obj = mainData[0].cha[i]; 

    var chlst = obj.name; 
    var vl = obj.sta.vot; 
    var cl = obj.sta.com; 

    chlist.push(chlst); 
    votList.push(vl); 
    comList.push(cl); 

    } 


    //var chlist = ['Ch 1', 'Ch 2', 'Ch 3', 'Ch 4']; 
    ////var votList = [10, 9, 8, 7]; 
    //var comList = [10, 9, 8, 7]; 

    var chart = { 
     type: 'column', 
    }; 

    var title = { 
     text: 'vot and com' 
    };  

    var xAxis = { 
     categories: chlist 
    }; 

    var yAxis ={ 
     min: 0, 
     title: { 
     text: 'cha' 
     }, 
     stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
     } 
     } 
    }; 

    var legend = { 
     align: 'right', 
     x: -30, 
     verticalAlign: 'top', 
     y: 25, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
     borderColor: '#CCC', 
     borderWidth: 1, 
     shadow: false 
    }; 

    var tooltip = { 
     formatter: function() { 
     return '<b>' + this.x + '</b><br/>' + 
      this.series.name + ': ' + this.y + '<br/>' + 
      'Total: ' + this.point.stackTotal; 
     } 
    }; 

    var plotOptions = { 
     column: { 
     stacking: 'normal', 
     dataLabels: { 
      enabled: true, 
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
      style: { 
       textShadow: '0 0 3px black' 
      } 
     } 
     } 
    }; 

    var credits = { 
     enabled: false 
    }; 


    var series= [{ 
     name: 'vot', 
     data: votList, 
     events: { 
      click: function (event) { 

       alert('vot Here'); 
       alert ('show: '+ this.cha +', value: '+ this.y); 




      } 
     } 
    }, { 
     name: 'com', 
     data: comList, 
     events: { 
      click: function (event) { 

       alert('com Here'); 
       alert ('show: '+ this.cha +', value: '+ this.y); 



      } 
     } 
    }];  

    var json = {}; 
    json.chart = chart; 
    json.title = title; 
    json.xAxis = xAxis; 
    json.yAxis = yAxis; 
    json.legend = legend; 
    json.tooltip = tooltip; 
    json.plotOptions = plotOptions; 
    json.credits = credits; 
    json.series = series; 

    $('#container').highcharts(json); 

    //end 

}); 

我怎樣才能做到這一點？

Answer 1

您可以添加column.point.click事件回調函數和這個函數的警報點名稱裏面使用警報（this.name）

plotOptions: { 
    column: { 
    stacking: 'normal', 
    keys: ['x', 'y', 'name'], 
    point: { 
     events: { 
     click: function() { 
      alert(this.name) 
     } 
     } 
    } 
    } 
}, 

在這裏你可以找到一個例子是如何工作的： http://jsfiddle.net/grz4zaLc/1/