Google Chart getSelection 没有列属性答案

【问题标题】：Google Chart getSelection doesn't have column propertyGoogle Chart getSelection 没有列属性
【发布时间】：2013-11-23 17:07:49
【问题描述】：

当我使用时：

chart.getChart().getSelection()[0]

在图表上（来自图表包装器，因此首先是 getChart()），getSelection() 函数返回只有行属性但没有列属性，即使我的“图表”是一个表格并且单击其中的任何位置都应该返回行和列属性。

这是一个已知的谷歌图表错误吗？有谁知道解决方法？

我也在 google 群组上找到了这个主题： https://groups.google.com/forum/#!topic/google-visualization-api/O_t7-s96A9w

他们在这里说：目前 Table 对象仅支持行选择，因此 column 属性始终未定义。如果这对您很重要，您可以通过在每个单元格的格式化值中添加一些特殊的 html 代码来自己捕获这些事件。

有人知道怎么做吗？

【问题讨论】：

你能澄清一下你想要做什么吗？我认为this question 也可能对您有所帮助，因为它似乎是相关的。
我想在谷歌图表中获取选定的单元格值。就像谷歌说应该可以在这里：code.google.com/apis/ajax/playground/… 和这里：developers.google.com/chart/interactive/docs/…。但是，当您查看他们的示例时……它甚至不起作用。所以我猜它还没有实施。如果有人可以解决这个问题，那就太好了。您提到的问题是相关的，但我知道如何捕获事件，这是 gchart 表不返回列坐标。
你说得对，它似乎坏了——这些例子几个月前就可以工作了，即使更改 API 的版本似乎也无法修复它。确实很奇怪。

标签： properties google-visualization getselection

【解决方案1】：

尽管google.visualization.table 仅支持行选择（它解释了为什么列属性返回 null），但您可以考虑以下方法来访问列属性：

google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: '$10,000'
      },
        true
      ],
      ['Jim', {
          v: 8000,
          f: '$8,000'
      },
        false
      ],
      ['Alice', {
          v: 12500,
          f: '$12,500'
      },
        true
      ],
      ['Bob', {
          v: 7000,
          f: '$7,000'
      },
        true
      ]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    table.draw(data, {
        showRowNumber: false
    });
}



function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var e = event || window.event;
  var cell = e.target; //get selected cell
 
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;

}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
<div id="output"></div>

【讨论】：

【解决方案2】：

您可以使用 HTML 格式化您的值，并在您的绘图选项中传递 'allowHtml: true'。然后，当用户单击单元格值时，您的 HTML 可以引发事件/执行您想要的 js。

例如，以下项目在点击时会引发警报：

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Ted',  {v: 10000, f: '<span onclick="alert(0)">$10,000</span>'}, true],
        ['Jim',   {v:8000,   f: '<span onclick="alert(1)">$8,000</span>'},  false],
        ['Alice', {v: 12500, f: '<span onclick="alert(2)">$12,500</span>'}, true],
        ['Bob',   {v: 7000,  f: '<span onclick="alert(3)">$7,000</span>'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function () {
        var s = table.getSelection();
        document.getElementById('row').innerHTML = s[0].row;
        document.getElementById('col').innerHTML = s[0].column;
        console.log(s);
    });
    table.draw(data, {showRowNumber: true, allowHtml: true});
}

google.load('visualization', '1', {packages:['table'], callback: drawTable});

见：

http://jsfiddle.net/fZzch/2/

更简洁的方法是使用自定义格式化程序：

How to write a custom formatter for Google DataTables (for use on visualisation api)

【讨论】：