グラフを描画できるライブラリのまとめ

  • このエントリーをはてなブックマークに追加

こんにちは、工藤です。
今回はグラフを描画できるライブラリをご紹介します。

vis.js

1vis
サイト・サンプルへ

ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。
あまりに複雑なものでなければアニメーションもサクサク動きます。


D3.js

2D3
サイトへ  サンプル一覧

かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。
慣れている人は自分で細かい作りこみもできそうですね。


cola.js

3cora
サイト・サンプルへ

サンプルはネットワーク図のようなものが豊富な印象です。
ブラウザ上で数値など変更して確認できるのが便利ですね。



CHARTIST.JS

4CHARTIST
サイトへ  サンプル一覧

こちらのライブラリの一番の特徴はありがたいことにレスポンシブ対応しているところです。
用意してあるサンプルのデザインもかわいらしいですね。


Chart.js

5Chart
サイトへ  サンプル一覧

フラットなデザインがとてもかわいらしいライブラリです。
HTML5のcanvasを使用して描画されています。


Flotr2

6Flotr2
サイト・サンプルへ

こちらもHTML5のcanvasを使用して描画されています。
クリックした箇所に点を打って折れ線グラフを描画できるなど、他とはまた違ったサンプルも用意されています。

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。