tricky part of google charts Column with drill dow

问题:

i am creating google charts and I already implement top 5 user column charts after that if you select first user column than displaying first user page history data from other variables(eachuser_data) its easy implement function in high charts! but in google charts, I don't know about add events.addListener work or not in this problem. let me know google charts provide click event on each column and display other graphs in same graph draw function. ? thank you in advance

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 64,
        right: 32,
        bottom: 48,
      },
      'vAxis': {
        title: 'Cost in USD ($)', format:'$#',
      },
      height: '100%',
      legend: {
        position: 'bottom'
      },
      width: '100%'
    }
    };
  //  columns charts data
  //top 5 user data with total click 
  var jsonData = [["johan",69],["jack",23],["scott",24],["x",5],["y",10]];
  loadData(jsonData, '1', 'Column');
  //specifc user data 
   var user1 = [["report1",45],["report2",40],["index.html",50]];
   var user2 = [["report1",4],["report2",3],["index.html",5]];
   var user3 = [["report1",4],["report2",3],["index.html",5]];
   var user4 = [["report1",4],["report2",3],["index.html",5]];
   var user5 = [["report1",4],["report2",3],["index.html",5]];
 


  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

       // add date column
       dataTable.addColumn('string', 'Total numbe of click');
       var rowIndex = dataTable.addRow();
       dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0));
       $.each(jsonData, function(productIndex, product) {
        var colIndex = dataTable.addColumn('number', product[0]);
          // add product data
          dataTable.setValue(rowIndex, colIndex, product[1]);
        });
         // draw chart
    $(window).resize(function () {
      drawChart(id, dataTable);
    });
    drawChart(id, dataTable);
  }


  function drawChart(id, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart-' + id,
        options:  {
          vAxis: {
            title: 'Cost in USD ($)',
            format: '$#',
          },
          width: '100%',
          height: '100%',
          legend: {
            position: 'bottom'
          },
        },
      });
    }
     charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-1"></div>

回答1:

to know which column has been clicked / selected,
listen for the 'select' event

google.visualization.events.addListener(chart, 'select', chartSelection);

then use chart method getSelection() to get the row and column index of the column selected
getSelection will return an array of objects

[{row: 0, column: 1}]

the select event will fire both when a column is selected and un-selected
be sure to check the length of the array return by getSelection()
before trying to access the array contents

for column charts, only one column can be selected at a time
so the values of the selection will always be the first element in the array

function chartSelection() {
  var selection = chart.getSelection();
  if (selection.length > 0) {
    var row = selection[0].row;
    var col = selection[0].column;
    var xValue = data.getValue(row, 0);
    var yValue = data.getValue(row, col);
    console.log('selection: ' + xValue + ' = ' + yValue);
  } else {
    console.log('nothing selected');
  }
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    ['A', 6, 7],
    ['B', 7, 9],
    ['C', 8, 11],
    ['D', 9, 11],
    ['E', 5, 6]
  ]);

  var options = {
    legend: {
      alignment: 'end',
      position: 'top'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'select', chartSelection);

  function chartSelection() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var row = selection[0].row;
      var col = selection[0].column;
      var xValue = data.getValue(row, 0);
      var yValue = data.getValue(row, col);
      console.log('selection: ' + xValue + ' = ' + yValue);
    } else {
      console.log('nothing selected');
    }
  }

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>