前の記事 ≪:超クールな画像スライドショーを実現するためのJavaScriptライブラリ「F...
次の記事 ≫:フリーのPHPフォトギャラリースクリプト「phpGraphy」

prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」

2007年02月07日-はてなブックマーク

スポンサード リンク
solutoire.com | Plotr
So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!) named Plotr.

prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」。
次のようなグラフをJavaScript+CSSで描画することが可能。



ライブラリを使ったソースコード例は次になります。

 var dataset = {
                'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
                'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
                'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
                'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
};
var options = {
        padding: {left: 30, right: 0, top: 10, bottom: 30},
        colorScheme: 'grey',
        backgroundColor: '#d8efb0',
        xTicks: [{v:0, label:'week 1'},
        {v:1, label:'week 2'},
        {v:2, label:'week 3'},
        {v:3, label:'week 4'},
        {v:4, label:'week 5'}
        ]             
};
 
var lineChart = new Plotr.LineChart('plotr1',options);
lineChart.addDataset(dataset);
lineChart.render();

使い方も非常に簡単かつクリーンですね。

関連エントリ

関連の記事検索:JavaScript, prototype.js, ライブラリ, Ajax, graph, グラフ
スポンサード リンク

By.KJ : 2007年02月07日 10:04 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)