谷歌可视化图表在选择事件数据时发出警报

Google Visualization Chart throw alert on Select Event Data

本文关键字：数据 事件 可视化 选择 谷歌      更新时间：2023-09-26

我正试图使用谷歌可视化柱状图，以便在选择特定列时发出警报。Ie.当Company1的列数据被选中时，我想做点什么（发出警报）：

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Company1');
        data.addColumn('number', 'Company2');
        data.addColumn('number', 'Company3');
        data.addColumn('number', 'Company4');
        data.addColumn('number', 'Company5');
        data.addColumn('number', 'Company6');
        data.addRows([
          ['Feb 1, 2012 - Mar 13, 2012', 10, 10, 5, 15, 10, 55]
        ]);
        var options = {
          title: 'Total Reviews',
          hAxis: {title: '',  titleTextStyle: {color: 'blue'}}
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('total'));
        chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
 //SOMETHING GOES HERE WHEN ie. Company1 is selected, probably an IF but I cant seem to let it know when Company1 is selected.
 alert('Company1 was selected!');       
}

必须调用getSelection函数才能检索当前选择。选择是一个对象数组。每个对象都有行和列属性（如果有的话）。使用第一列检索标签名称：

google.visualization.events.addListener(chart, 'select', function() {
  var selection = chart.getSelection()[0];
  var label = data.getColumnLabel(selection.column);
  if (label === "Company1"){
    alert("!");
  }
});

文档（点击链接阅读更多）：

selection_larray:选定对象的数组，每个对象描述用于创建可视化的基础表中的数据元素（DataView或DataTable）。每个对象都有属性行和/或列，具有所选项目的行和/或列的索引在底层DataTable中。如果行属性为null，则选择是一列；如果列属性为null，则选择是一行；如果两者都不是null，那么它就是一个特定的数据项目您可以调用DataTable.getValue（）方法来获取所选项目。检索到的数组可以传递到设置选择（）

相关文章：