サイトでグラフを使いたい時に使えるまとめ

企業のサイトを構築していると、グラフやチャートが必要になることが多いです。

小難しいことをダラダラと書くよりも、グラフでデータを見せる方が、ユーザーの方々に分かりやすくていいですよね。

っちゅうわけで、本日はグラフを描く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

パイチャート、折れ線グラフ、棒グラフ、バブルチャートがとりあえず、お試しでファイルをダウンロードできます。そこで気に入ってサイト上で使いたい!っと思ったら購入できます。




8. Create a Graph

チャートジェネレータです。サイト上でデータを入力して、そのままプリントもしくは、ダウンロードが選択できます。




9. Ajax MGraph

Prototype.jsベースのAjax棒グラフです。




10. PlotKit – Javascript Chart Plotting

MochiKitというライブラリをベースにしたグラフ。




11. Plotr | Solutoire.com

↑のPlotkitの派生版です。




12. Real World Bar Graphs | Khmerang.com

こちらは、HTMLとCSSできれいな棒グラフを作るチュートリアルです。




13. CSS FOR BAR GRAPHS | Apples to Oranges

こちらもCSSで作るきれいなグラフチュートリアルです。




グラフやチャートも見せ方次第でとってもきれいになりますね。。

関連記事

4件のコメント

  1. こんにちは。この記事とても面白いです。

    わたしは「南イタリア・シチリア生活」というブログをやってます。8の”Create a Graph”というの、早速使ってみました。とてもカンタンでキレイにできました。

    この記事にはってみました。http://yukisicilia.blog63.fc2.com/blog-entry-307.html

  2. yuki@siciliaさん
    コメントどうもありがとうございます~。「南イタリア・シチリア生活」をグラフにしてみると・・・面白いですねぇ~。Buona!Buona!

  3. XHTML+CSSだけでグラフを描けるサンプル(CSS only Charts/Graphs)

    色々なところから「CSSだけで実装するグラフ・チャート」の記事をみてみて、もっと簡単に良いグラフが作れないものかと考えたら、結構良い物ができました。

  4. ピンバック: PocketGang.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です