prototypeベースでグラフを作成するjavascript「Plotr」 : skuare.net

prototypeベースでグラフを作成するjavascript「Plotr」

2007

08/01

Solutoire.comのPlotrは棒グラフ、円グラフ、線グラフを作成できるjavascriptです。
グラフを作成するjavascript「PlotKit」で紹介したPlotKitがMochiKitを使用するのに対して、Plotrではprototypeを使用しています。

使用方法
Plotrからダウンロードしてきたファイルをアップロードし以下のようにheadに書き込みます。
<script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http://yourdomain/excanvas.js" type="text/javascript"></script> <script src="http://yourdomain/plotr.js" type="text/javascript"></script>
次にグラフを表示したい場所に以下を書きます。
<div><canvas id="グラフのid名" height="300" width="300"></canvas></div>
ここで指定した高さと幅が表示されるグラフの大きさになります。
以上はPlotKitと同様です。
Plotrでのデータの設定は以下の通りです（棒グラフ）。
<script type="text/javascript"> // データの定義 var dataset = { 'A君': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]], 'B君': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]], 'C君': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]], 'D君': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]] }; // オプションの定義 var options = { // カンバスの余白（padding）設定 padding: {left: 30, right: 0, top: 10, bottom: 30}, // 背景色の設定 backgroundColor: '#f2f2f2', // グラフの色を設定（blue、red、greenなど） colorScheme: 'blue', // 棒グラフの形状（縦：vertical） barOrientation: 'horizontal', // 項目ラベルの指定 xTicks: [ {v:0, label:'初日'}, {v:1, label:'2日目'}, {v:2, label:'3日目'}, {v:3, label:'4日目'} ] }; var horizontal = new Plotr.BarChart('グラフのid名',options); horizontal.addDataset(dataset); horizontal.render(); // 項目を作成 horizontal.addLegend($('項目のid名')); </script>
HTML（項目の表示）
<fieldset id=¥"項目のid名¥"> <legend>Legend</legend> </fieldset>
結果と折れ線グラフ、円グラフはprototypeベースでグラフを作成するjavascript「Plotr」サンプルをご覧下さい。