单击堆积柱形图

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

在绘制图表

之前，必须为所有事件处理程序指定

另外，建议在访问数组元素之前测试选择的length

当选择一个栏并取消选择时，'select'事件都会被触发 getSelection在后​​者上重写一个空数组

同样，当它被解雇时没有任何东西传递给它 e将不存在 - ＆gt; 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);