JavaScriptでグラフを描画出来るライブラリ『WebFX』
2006年08月22日-
In web applications developed now days a lot of the logic that previously resided on the server side is now being implemented on the client side. This is especially true for information presentation, components such as trees and columnlist makes it possible for users to interact with the application, or web site if you wish, without contacting the server. However the ability to present data in a graphic rather than textual format has been quite limited, unless a plugin is used or an image is requested from the server.
JavaScriptでグラフを描画出来るライブラリ『WebFX』。
サーバサイドの技術は使わず、JavaScriptのみ次のようなグラフを描画できます。
次のようにJavascriptとCSSを読み込んだ後、DIVを定義しておきます。
<script type="text/javascript" src="includes/iecanvas.js"></script>
<script type="text/javascript" src="includes/chart.js"></script>
<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="includes/canvaschart.css" />
<body>
<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
そして、次のようにJavaScriptを呼び出すことでグラフを描画できるようです。
function draw() {
var c = new Chart(document.getElementById('chart'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(5, 5);
c.setVerticalRange(0, 100);
c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
c.add('Spam', '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
c.add('Innocent', '#8080FF', [ 8, 7, 12, 20, 24, 16, 36, 28, 28, 45]);
c.add('Missed Spam', '#A5A5FF', [ 8, 7, 12, 20, 24, 16, 36, 36, 18, 5]);
c.add('False Positives', '#DEDEFF', [ 1, 2, 3, 2, 1, 4, 18, 12, 8, 7]);
c.draw();
}
window.onload = function() {
ieCanvasInit('includes/iecanvas.htc');
draw();
};
サーバ側でソフトが動かなくても使えるのが便利ですね。
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ