書式
graphObj = new Plotr.LineChart(ID, options)graphObj : グラフオブジェクト
ID : canvasタグのID名
options : グラフ描画オプション
説明
Ajaxライブラリ リファレンスサンプルコード [実行]
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="plotr/Plotr.js"></script>
<script type="text/javascript" src="plotr/excanvas.js"></script>
<script type="text/javascript"><!--
function displayGraph(){
var dataset = {
"y2007Q1": [[0, 5.5], [1, 7.89], [2, 8.15], [3, 9.8]],
"y2006Q4": [[0, 1], [1, 2], [2, 3.2], [3, 4.5]],
"y2006Q3": [[0, 0.5], [1, 1.6], [2, 1.2], [3, 1.5]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
xTicks: [
{v:0, label:"T1"},
{v:1, label:"T2"},
{v:2, label:"T3"},
{v:3, label:"T4"}
]
};
var gLine = new Plotr.LineChart("graph", options);
gLine.addDataset(dataset);
gLine.render();
}
// --></script>
</head>
<body>
<h1>グラフを描く</h1>
<form>
<input type="button" value="グラフ表示" onClick="displayGraph()">
</form>
<div><canvas id="graph" height="300" width="600"></canvas></div>
</body>
</html>