HighCharts Stacked Column Добавление события Onclick к диаграмме

Question

Я работаю над диаграммой столбцов Highchart.

Мне нужно добавить событие onclick, чтобы я мог вернуть данные, когда я нажимаю на разные столбцы.

Вот мой текущий полный код.

var chart; 

    $(function() { 

     $.ajax({ 

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

       themainData = result; 

      } 
     }); 


     var mainData = [themainData]; 
     var chList=[]; 
     var voList=[]; 
     var coList=[]; 

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

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

     var chlst = obj.name; 
     var vl = obj.st.vo; 
     var cl = obj.st.co; 

     chList.push(chlst); 
     voList.push(vl); 
     coList.push(cl); 

     } 

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

     var title = { 
      text: 'Vo and Co' 
     };  

     var xAxis = { 
      categories: chList 
     }; 

     var yAxis ={ 
      min: 0, 
      title: { 
      text: 'Ch' 
      }, 
      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: 'Vo', 
       data: voList 
      }, { 
       name: 'Co', 
       data: coList  
     }];  

     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); 


    }); 

Где я могу добавить событие onclick здесь?

Answer 1

Вы можете добавить событие click на диаграмму, серию или точку. Я думаю, что в вашем случае имеет смысл добавить событие click в серию.

var series= [{ 
     name: 'Vo', 
     data: voList 
     events: { 
      click: function (event) {} 
     } 
    }, { 
     name: 'Co', 
     data: coList  
    }]; 

event.point - точка, на которую нажимают. См. http://api.highcharts.com/highcharts/series%3Cbar%3E.events.click