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

Sushant Bajracharya 发表于 Dev

Sushant Bajracharya

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

这就是所有代码。现在，我需要在单击它时显示与黄条有关的数据。假设我单击了第一栏的黄色条，那么它应该显示它的数据，但是如果我单击第二栏的黄色条，那么它应该显示关于它的数据。任何想法如何解决这个问题？

白帽

在绘制图表之前，必须分配所有事件处理程序

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

该'select'事件被触发时都棒被选择和取消选择
getSelectionreturs对后者空数组

同样，什么也不会传递给事件，当它被触发时
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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。