LINEで送る
Pocket

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

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

っちゅうわけで、本日はグラフを描く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で作るきれいなグラフチュートリアルです。

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

Similar Posts:

LINEで送る
Pocket


4 Thoughts on “サイトでグラフを使いたい時に使えるまとめ”

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

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

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

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

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

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

  • ピンバック: PocketGang.com

コメントを残す

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