円グラフを描く

書式

graphObj = new Plotr.PieChart(ID, options)

graphObj : グラフオブジェクト
ID : canvasタグのID名
options : グラフ描画オプション

説明

円グラフを描くにはcanvasタグで描画領域を設定しておきます。この時にID名を指定し、このID名をPlotr.PieChart()の最初のパラメータとして指定します。2番目のパラメータはグラフを描画するオプションを指定します。

サンプルコード [実行]

<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 = {
"share": [[0, 1], [1, 1], [2, 3], [3, 5]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
xTicks: [
{v:0, label:"ブラウン管"},
{v:1, label:"リアプロ"},
{v:2, label:"プラズマ"},
{v:3, label:"液晶"}
]
};
var pie = new Plotr.PieChart("graph", options);
pie.addDataset(dataset);
pie.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>