javascript - HighCharts堆积的列将Onclick事件添加到图表

我正在制作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事件？

最佳答案

您可以在图表，系列或点上添加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

关于javascript - HighCharts堆积的列将Onclick事件添加到图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39494683/