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

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("
")); temp.push(v.offline_gateway_count); temp.push(v.offline_gateway_datasources.join("
")); temp.push(v.stale_gateway_count); temp.push(v.stale_gateway_datasources.join("
")); temp.push(v.never_reported_gateway_count); temp.push(v.never_reported_gateway_datasources.join("
")); 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将不存在 – > 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);