コメント |
@DIV
<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>
@END
|