prototype.jsを使ったJavaScriptでグラフ描画ライブラリ「Plotr」
2007年02月07日-
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();
使い方も非常に簡単かつクリーンですね。
関連エントリ
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ