Show different data when clicked on a part of stacked column chart

问题

var data_arr = [];
var header = ['Location',
  'Online', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Offline', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Stale', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  },
  'Never Reported', {
    role: 'tooltip',
    type: 'string',
    p: {
      html: true
    }
  }, {
    type: 'number',
    role: 'annotation'
  }
];
data_arr.push(header);
debugger
$.each(status_by_location, function(k, v) {
  var temp = [];
  // v.online_gateway_count = 1;
  // v.offline_gateway_count  = 1;
  // v.stale_gateway_count = 1;
  // v.never_reported_gateway_count = 1;

  temp.push(k);
  temp.push(v.online_gateway_count);
  temp.push(v.online_gateway_datasources.join("<br>"));
  temp.push(v.offline_gateway_count);
  temp.push(v.offline_gateway_datasources.join("<br>"));
  temp.push(v.stale_gateway_count);
  temp.push(v.stale_gateway_datasources.join("<br>"));
  temp.push(v.never_reported_gateway_count);
  temp.push(v.never_reported_gateway_datasources.join("<br>"));
  var total_for_each_bar = v.online_gateway_count + v.offline_gateway_count + v.stale_gateway_count + v.never_reported_gateway_count;
  temp.push(total_for_each_bar);

  data_arr.push(temp);
});
var data = google.visualization.arrayToDataTable(data_arr);


var options = {
  isStacked: true,
  title: 'Gateway Info By Location',
  vAxis: {
    title: ''
  },
  hAxis: {
    title: 'Location'
  },
  seriesType: 'bars',
  series: {
    5: {
      type: 'line',
      lineWidth: 0
    }
  },
  tooltip: {
    isHtml: true,
    trigger: 'selection'
  }
  // legend: {position: 'bottom', textStyle: {color: 'blue', fontSize: 16}}
};

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));
test.draw(data, options);
google.visualization.events.addListener(test, 'select', selectHandler);

function selectHandler(e) {
  var selectedItem = test.getSelection()[0];
  if (selectedItem != undefined && selectedItem.row != null) {
    // gets the location in x axis
    var loc_bar = data.getValue(selectedItem.row, 0);
    var value = data.getValue(selectedItem.row, selectedItem.column);
  }
}
}

This is all the code. Now I need to show the data related with the yellow bar when clicked on it. suppose i clicked on the yellow bar of first bar then it should show data of it but if i click on the yellow bar of second bar then it should show data regarding it. any idea how to solve this?

回答1:

any event handlers must be assigned before drawing the chart

also, recommend testing the length of the selection, before accessing the array elements

the 'select' event is fired both when a bar is selected and de-selected
getSelection returs an empty array on the latter

also, nothing is passed to the event when it is fired
e won't exist --> selectHandler(e)

see following snippet...

var test = new google.visualization.ComboChart(document.getElementById('chart_div'));

google.visualization.events.addListener(test, 'select', selectHandler);
function selectHandler() {
  var selection = test.getSelection();
  if (selection.length > 0) {
    var loc_bar = data.getValue(selection[0].row, 0);
    var value = data.getValue(selection[0].row, selection[0].column);
    var tooltip = data.getValue(selection[0].row, selection[0].column + 1);
    var columnName = data.getColumnLabel(selection[0].column);
  }
}

test.draw(data, options);

来源：https://stackoverflow.com/questions/38871829/show-different-data-when-clicked-on-a-part-of-stacked-column-chart