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

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

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

っちゅうわけで、本日はグラフを描くIllustrator系チュートリアルから、CSSを使ったグラフなど、なるべくデザイン的にきれいなものを、いろいろまとめてみました。

1. Creating graphs | Bartelme Design

Illustratorのチュートリアル。とってもきれいなグラフですね。パート2では3Dのやり方の詳細が説明されています。


Creating graphs | Bartelme Design

2. Step-by-step Tutorial by Veerle

こちらもIllustratorのパイチャートツールを使ったチュートリアル。


Step-by-step Tutorial by Veerle

3. 3D Graphs | N.DESIGN STUDIO

パイの一部がぴょこっと離れたパイチャートのチュートリアル。ファイルもダウンロードできます。


3D Graphs | N.DESIGN STUDIO

4. 3D Charts in Adobe Illustrator CS

ゼリー状のきれいなチャートもいいですね。


3D Charts in Adobe Illustrator CS

5. Pie Charts in Illustrator | GoSquared

シンプルな3Dチャート。


Pie Charts in Illustrator | GoSquared

6. HowTo: Make Pretty Pie Charts | modern life.

ポップでかわいいパイチャートですね。


HowTo: Make Pretty Pie Charts | modern life.

7. amCharts

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


amCharts

8. Create a Graph

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


Create a Graph

9. Ajax MGraph

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


Ajax MGraph

10. PlotKit – Javascript Chart Plotting

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


PlotKit - Javascript Chart Plotting

11. Plotr | Solutoire.com

↑のPlotkitの派生版です。


Plotr | Solutoire.com

12. Real World Bar Graphs | Khmerang.com

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


Real World Bar Graphs | Khmerang.com

13. CSS FOR BAR GRAPHS | Apples to Oranges

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


CSS FOR BAR GRAPHS | Apples to Oranges

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

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “サイトでグラフを使いたい時に使えるまとめ”

  1. yuki@sicilia Says:

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

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

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

  2. 管理人 Says:

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

  3. 日刊にしこり-埼玉版- Says:

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

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

  4. PocketGang.com Says:

    仕事では良くエクセルを使う方です。…

    仕事は財務関係ということで、日常的にエクセルは良く使うソフトです。でも、使っているエクセルのバージョンはなんとも2002なんです。まあ、データ作成と管理ができれば問題ない……

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ