Google Chart getSelection doesn't have column property

喜欢而已 提交于 2019-12-22 09:17:14

问题


When I use:

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

on a chart (from a chartwrapper, hence the getChart() first), the getSelection() function returns only a row-property but no column property even though my 'chart' is a table and clicking anywhere within it should return both a row and column property.

Is this a known google charts bug? Does anyone know of a workaround?

Also I have found this topic on google groups: https://groups.google.com/forum/#!topic/google-visualization-api/O_t7-s96A9w

here they say: Currently the Table object only supports row selection and therefore the column property is always undefined. If this is important for you, you can catch these events by yourself by adding some special html code int he formatted value of each cell.

Anyone have an idea how to do this?


回答1:


Even though google.visualization.table supports row selection only (it explains why column property returns null), you could consider the following approach to access column property:

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:


You can format your values with HTML, and pass 'allowHtml: true' in your draw options. Then your HTML can raise the event / execute the js that you want it to when a user clicks on the cell value.

For example, the items below will raise an alert when clicked on:

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

See:

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

A cleaner approach is to use a custom formatter:

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



来源:https://stackoverflow.com/questions/20165281/google-chart-getselection-doesnt-have-column-property

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!