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/