リンクGoogleの可視化テーブルによって

Question

を各行を包む彼らは

google.visualization.events.addListener(table, 'select', function() {} 

から、ユーザが選択した後、私はすべてのテーブルの行のポップアップ・ウィンドウを持っていますが、デフォルトのGoogleの可視化テーブルの行がクリック可能として表示されません。

私はそれらをクリック可能な状態でユーザーに表示します。だから私は運がないこのコードを追加しました。

var container = document.getElementById(divName); 
var table = new google.visualization.Table(container); 
table.draw(data, options); 
google.visualization.events.addListener(table, 'ready', function() { 
    container.getElementsByTagName('TR')[0].html = '<a href="#" />'; 
    console.log("table ready"); 
}); 

コンソールでも何も印刷されません。どんな援助も訴えられるでしょう。

Answer 1

あなただけのユーザーはあなたがdiv

#chart_div tr { 
    cursor: pointer; 
} 

あなたもチャートのcssClassNamesオプションを使用してCSSを割り当てることができ、チャート上のCSSを使用することができます
行に置いたときにカーソルが手の形に変更したい場合そのようにあなたは、チャートのデフォルトのCSSを失うがある
唯一の問題、
はそうあなたが「したい場合だけcursor

以上のものを提供しなければなりません表示するハイパーリンク」、あなたは最初のセル
のテキストを変更することができますが、アンカータグに<a>

を行全体をラップすることはできません両方...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month', '2015', '2016'], 
 
     ['Jan', 10, 15], 
 
     ['Feb', 12, 18], 
 
     ['Mar', 14, 21], 
 
     ['Apr', 16, 24] 
 
    ]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Table(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     var tableRows = container.getElementsByTagName('tbody')[0].rows; 
 
     // change first cell to link 
 
     Array.prototype.forEach.call(tableRows, function(row) { 
 
     row.cells[0].innerHTML = '<a href="#">' + row.cells[0].innerHTML + '</a>'; 
 
     }); 
 
    }); 
 

 
    chart.draw(data, { 
 
     allowHtml: true 
 
    }); 
 
    }, 
 
    packages: ['table'] 
 
});

#chart_div tr { 
 
    cursor: pointer; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

を組み込んだ、作業スニペット以下を参照してください。