javascript - 单击堆积柱形图的一部分时显示不同的数据

Question

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

这就是全部代码。现在我需要在单击黄色条时显示与黄色条相关的数据。假设我单击第一个栏的黄色栏，那么它应该显示它的数据，但如果我单击第二个栏的黄色栏，那么它应该显示有关它的数据。知道如何解决这个问题吗？

Answer 1

必须在绘制图表之前分配任何事件处理程序

另外，建议在访问数组元素之前测试所选内容的长度

选择和取消选择栏时都会触发 'select' 事件
getSelection 在后者上返回一个空数组

此外，触发事件时不会将任何内容传递给该事件
e 不会存在 --> selectHandler(e)

请参阅以下代码片段...

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