サイトでグラフを使いたい時に使えるまとめ
企業のサイトを構築していると、グラフやチャートが必要になることが多いです。
小難しいことをダラダラと書くよりも、グラフでデータを見せる方が、ユーザーの方々に分かりやすくていいですよね。
っちゅうわけで、本日はグラフを描くIllustrator系チュートリアルから、CSSを使ったグラフなど、なるべくデザイン的にきれいなものを、いろいろまとめてみました。
1. Creating graphs | Bartelme Design
Illustratorのチュートリアル。とってもきれいなグラフですね。パート2では3Dのやり方の詳細が説明されています。
2. Step-by-step Tutorial by Veerle
こちらもIllustratorのパイチャートツールを使ったチュートリアル。
3. 3D Graphs | N.DESIGN STUDIO
パイの一部がぴょこっと離れたパイチャートのチュートリアル。ファイルもダウンロードできます。
4. 3D Charts in Adobe Illustrator CS
ゼリー状のきれいなチャートもいいですね。
5. Pie Charts in Illustrator | GoSquared
シンプルな3Dチャート。
6. HowTo: Make Pretty Pie Charts | modern life.
ポップでかわいいパイチャートですね。
7. amCharts
パイチャート、折れ線グラフ、棒グラフ、バブルチャートがとりあえず、お試しでファイルをダウンロードできます。そこで気に入ってサイト上で使いたい！っと思ったら購入できます。
チャートジェネレータです。サイト上でデータを入力して、そのままプリントもしくは、ダウンロードが選択できます。
9. Ajax MGraph
Prototype.jsベースのAjax棒グラフです。
10. PlotKit – Javascript Chart Plotting
MochiKitというライブラリをベースにしたグラフ。
↑のPlotkitの派生版です。
12. Real World Bar Graphs | Khmerang.com
こちらは、HTMLとCSSできれいな棒グラフを作るチュートリアルです。
13. CSS FOR BAR GRAPHS | Apples to Oranges
こちらもCSSで作るきれいなグラフチュートリアルです。
グラフやチャートも見せ方次第でとってもきれいになりますね。。
|
|
|
10月 9th, 2007 at 1:43 PM
こんにちは。この記事とても面白いです。
わたしは「南イタリア・シチリア生活」というブログをやってます。8の”Create a Graph”というの、早速使ってみました。とてもカンタンでキレイにできました。
この記事にはってみました。http://yukisicilia.blog63.fc2.com/blog-entry-307.html
10月 25th, 2007 at 2:53 PM
yuki＠siciliaさん
コメントどうもありがとうございます～。「南イタリア・シチリア生活」をグラフにしてみると･･･面白いですねぇ～。Buona!Buona!
12月 30th, 2007 at 4:33 PM
XHTML+CSSだけでグラフを描けるサンプル(CSS only Charts/Graphs)
色々なところから「CSSだけで実装するグラフ・チャート」の記事をみてみて、もっと簡単に良いグラフが作れないものかと考えたら、結構良い物ができました。
…
10月 6th, 2008 at 3:01 AM
仕事では良くエクセルを使う方です。…
仕事は財務関係ということで、日常的にエクセルは良く使うソフトです。でも、使っているエクセルのバージョンはなんとも2002なんです。まあ、データ作成と管理ができれば問題ない……