書式
padding: { left: nL, right: nR, top: nT, bottom: nB}nL : 左の余白
nR : 右の余白
nT : 上の余白
nB : 下の余白
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 = {
"y2006Q3": [[0, 1], [1, 1], [2, 1.2], [3, 1.5]],
"y2007Q1": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4]]
};
var options = {
padding: {left: 100, right: 0, top: 50, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
barOrientation : "horizontal",
xTicks: [
{v:0, label:"ブラウン管"},
{v:1, label:"リアプロ"},
{v:2, label:"プラズマ"},
{v:3, label:"液晶"}
]
};
var bar = new Plotr.BarChart("graph", options);
bar.addDataset(dataset);
bar.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>