拡張子:txtvbswsfjsphpjavahtmlutf8sjis <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API テーブル操作サンプル</title> <body style='background-color:#E0E0E0'> この表示エリアは UTF-8 です<br> <style type="text/css"> .google-visualization-table-table td { padding:7px!important; border-style: solid; border-color: #A0A0A0; border-width: 1px; } </style> <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8" ></script> <script type="text/javascript"> google.load("prototype", "1.6.0.3" ); google.load('visualization', '1', { packages: ['table'] }); </script> <script type="text/javascript"> function drawVisualization() { var query = new google.visualization.Query( "http://spreadsheets.google.com/pub?key=p6PfePgDMJFDiPOs-zVmaGw"); query.setQuery("select *"); query.send( responseGet ); } function responseGet(response) { if ( response.isError() ) { alert(getDetailedMessage()); return; } var data = response.getDataTable(); data.setColumnLabel( 0, "タイトル" ); data.setColumnLabel( 1, "作者" ); // テーブル作成 visualization = new google.visualization.Table( document.getElementById('table_area') ); visualization.draw(data, { // オプションの指定 allowHtml: true, showRowNumber: true } ); } google.setOnLoadCallback(drawVisualization); </script> タイトルをクリックするとソートされます <div id="table_area"></div> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Visualization API テーブル操作サンプル</title> <body style='background-color:#E0E0E0'> この表示エリアは UTF-8 です<br> <style type="text/css"> .google-visualization-table-table td { padding:7px!important; border-style: solid; border-color: #A0A0A0; border-width: 1px; } </style> <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8" ></script> <script type="text/javascript"> google.load("prototype", "1.6.0.3" ); google.load('visualization', '1', { packages: ['table'] }); </script> <script type="text/javascript"> function drawVisualization() { var query = new google.visualization.Query( "http://spreadsheets.google.com/pub?key=p6PfePgDMJFDiPOs-zVmaGw"); query.setQuery("select *"); query.send( responseGet ); } function responseGet(response) { if ( response.isError() ) { alert(getDetailedMessage()); return; } var data = response.getDataTable(); data.setColumnLabel( 0, "タイトル" ); data.setColumnLabel( 1, "作者" ); // テーブル作成 visualization = new google.visualization.Table( document.getElementById('table_area') ); visualization.draw(data, { // オプションの指定 allowHtml: true, showRowNumber: true } ); } google.setOnLoadCallback(drawVisualization); </script> タイトルをクリックするとソートされます <div id="table_area"></div> </body> </html>