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

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

使用方法
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」サンプルをご覧下さい。

sponsors

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

記事作成:
記事URL:

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