どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
##結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 ##Highchart http://www.highcharts.com/ 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ##ccchart(canvasChart) http://jsgt.org/c/ 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! ##raphael.js http://raphaeljs.com/ qiitaのプロフィールの円グラフで使
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
ActionScriptを利用して図形を描くことが可能です。 図形の点が移動するので、シェイプトゥイーンのような動作を行うことができます。 キャンバスに五角形が描かれます。 レーダーチャート等で使用できます。
スクリプトで描くグラフ１ [サンプルはこちら][ソースファイルはこちら（FlashMX/Lzh圧縮）] MX2004という新バージョンが発表された今更なのですが、FlashMXからの新機能、「lineTo」などの描画メソッドを使った、スクリプトによる描画のサンプルです。 まぁ、やっとFlashPlayer6対応を標準と考えてもいいかなという風潮も出てきたということで。 グラフは普通にマウスでラインを引けば描けますが、それではただの絵です。 スクリプトを使って描くメリットは、描いたものを後からインタラクティヴに（あるいは状況に応じて）変化させることができる点です。 FlashMXの描画メソッドで絵を描くには、次のような手順を踏みます。 (1)絵を描くためのMCを用意する。 (2)念のため、すべての描画をクリアしておく。（初期化） (3)ラインのスタイルを決定する。 (4)ラインを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く