2

これが、ソート可能なテーブルを作成するために私が見つけたコードです。表のテキストをリストされている記事にリンクさせたいと思います。これどうやってするの？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Sortable Table</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">




  function drawVisualization() {
    // Prepare the data.
    var data = google.visualization.arrayToDataTable([
      ['Article', 'Year'],
      ['Article 1 link', 2012],
      ['Article 2 link', 2006],
      ['Article 3 link', 2010],
      ['Article 4 link', 1996],
      ['Article 5 link', 2002],
      ['Article 6 link', 1999],
      ['Article 7 link', 1942],
      ['Article 8 link', 2012]
    ]);

    // Define a StringFilter control for the 'Article' column
    var stringFilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'Article'
      }
    });

    // Define a table visualization
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'chart1',
      'options': {'height': '13em', 'width': '20em'}
    });

    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Configure the string filter to affect the table contents
      bind(stringFilter, table).
      // Draw the dashboard
      draw(data);
  }

  google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td height="200" style='width: 300px; font-size: 0.9em;'>
        <div id="control1"></div>
        <div id="control2"></div>
        <div id="control3"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart1"></div>
        <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

</ p>

4

0 に答える 0