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/

을