谷歌圖getSelection不具有列屬性

當我使用：谷歌圖getSelection不具有列屬性

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

在圖表上（從chartwrapper，因此getChart（）第一），則getSelection（）函數返回僅一個行向屬性，但沒有列屬性，即使我的'圖表'是一個表，並點擊它的任何地方應該返回一個行和列屬性。

這是一個已知的谷歌圖表錯誤？有誰知道解決方法？

而且我發現這個話題在谷歌組： https://groups.google.com/forum/#!topic/google-visualization-api/O_t7-s96A9w

在這裏，他們說：目前的表對象只支持行選擇，因此列屬性始終是不確定的。如果這對你很重要，你可以通過在每個單元格的格式化值中添加一些特殊的html代碼來捕獲這些事件。

任何人都有一個想法如何做到這一點？

來源

2013-11-23 Sleenee

你能否澄清一點什麼你試圖做？我認爲[這個問題]（http://stackoverflow.com/questions/15632698/google-visualization-click-event/15650043#15650043）也可能會幫助你，因爲它似乎是相關的。 – jmac

我想要在谷歌圖表表格中獲取選定的單元格值。像谷歌說應該可以在這裏：https://code.google.com/apis/ajax/playground/?type=visualization#select_event和在這裏：https://developers.google.com/chart/interactive/docs/events #The_Select_Event。然而，當你看看他們的例子......它甚至不工作。所以我猜它還沒有實施。如果有人想要做這件事，那就太好了。你提到的問題是相關的，但我知道如何捕獲事件，這是gchart Table不返回列座標。 – Sleenee

你說得對，看起來好像破了 - 這些例子幾個月前就開始工作了，甚至改變了API的版本似乎也沒有解決它。奇怪的確如此。 – jmac

您可以使用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)

來源

2014-02-28 16:31:42

Ev恩雖然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>

來源

2015-10-30 22:09:47

谷歌圖getSelection不具有列屬性

回答

相關問題