( リストの解説 )
<html>
<head>
<!-- 文字コードを設定 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<!-- google サイトを呼び出します -->
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// ChartAPIを読み込みます
google.load('visualization', '1.0' , {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
// 呼び出し関数を定義します
function drawChart() {
var data = new google.visualization.DataTable();
// 変数「data」にDataTableオブジェクトを格納し、架空のテーブルを作ります
// カラム(テーブル)を作成。string型の'Year'列とnumber型の'経費'と'売上'の列を作ります
data.addColumn('string','Year');
data.addColumn('number','経費');
data.addColumn('number','売上');
// ここではdata.setValue()に変えて連想配列でデータを格納します
data.addRows([ ['2000', 300,1500 ],['2002',700,2000 ],['2004', 560,1000 ],
['2006',800,2200 ] ]);
// オプションでタイトルなどを設定
var options = {
title: '線グラフ サンプル', // タイトルの指定
lineWidth:5, // 線幅を指定
series: { 1: {targetAxisIndex: 1} }, // data1で右軸を使用
// 縦軸のtitle等を配列で指定
vAxes:[ {minValue:0, title:'経費 [万円]',textStyle:{color: 'blue'},
titleTextStyle:{color: 'blue',fontSize:14}},{minValue:0,title:'売上 [万円]',
textStyle:{color: 'red'},titleTextStyle:{color:'red'} } ],
hAxis:{title:'年度',titleTextStyle:{color:'#333',fontSize:14}}, // 横軸の設定
backgroundColor: {'stroke':'#666','strokeWidth':1,'fill':'#ffd'}, // 背景色等を設定
curveType: 'function', // 折れ線を滑らかにする
legend:'none' // 凡例を非表示
};
// Id('chart')にグラフを書き出す指示をします
var chart = new google.visualization.LineChart(document.getElementById('chart'));
// データをオプションで書き出すよう命令
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- id="chart" にグラフ表示領域を設定 -->
<span id="chart" style="width: 600px; height:300px; top:2px;"></span>
</body>
</html>
TopPage Chart Top 参考:
google chart
くめちゃん
雑記帳
API
|