ラベルを表示する

書式

xTicks:[ { v : pos, label : "labelName" },...{〜} ]

pos : ラベル番号(位置)
labelName : ラベル名

説明

ラベルを表示するにはオプションでxTicksを指定します。表示するラベルは表示位置とラベル名をペアにしたものを必要な数だけ配列に入れます。

サンプルコード [実行]

<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], [0,0]],
"y2007Q1": [[0, 0.5], [1, 0.89], [2, 2.15], [3, 4], [0,0]]
};
var options = {
padding: {left: 80, right: 0, top: 10, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
barOrientation : "horizontal",
xTicks: [
{v:0, label:"ブラウン管"},
{v:1, label:"リアプロ"},
{v:2, label:"プラズマ"},
{v:3, label:"液晶"},
{v:4, label:"SED"}
]
};
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>