Question

来自Google Chart Table;如何创建链接“INSIDE”同一页面（基本上在同一页面内做书签）。我知道如何使用data.addColumn（'link'，'link'）链接到外部网页;但有没有办法可以在表格中添加代表书签的链接。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      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'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>

<h2><a id="Mike">Mike</h2>
<p>Mikes Finance details ba bla bla</p>
<p></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="Alice">Alice</h2>
<p>Alice Finance details ba bla bla</p>

<h2><a id="Bob">Bob</a></h2>
<p>Bob Finance details ba bla bla</p>

<h2>Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2><a id="Jim">Jim</h2>
<p>Jims Finance details ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>  

<div id='table_div'></div>

<a href="#Mike">Mike's Finance</a>
<a href="#Jim">Jim's Finance</a>
<a href="#Mike">Alice's Finance</a>
<a href="#Jim">Bob's Finance</a>

    </body>
</html>

Answer 1

 google.visualization.events.addListener(table, 'select', function(e){
  location.href = "#" + data.getValue(table.getSelection()[0].row,0);
 });

这就是真的所有（如果我能正确理解你的问题）

演示Here

谷歌图表链接到表格内的同一页面（基本上在同一页面内做书签）

1 个答案: