【JavaScript】グラフなどの描画をサポートするライブラリまとめ

graphical-chart-javascript-libraries

折線グラフ、棒グラフ、円グラフやレーダーチャートなどを画像を使わずに描画をするJavaScriptライブラリをまとめてみました。

Chart

6種類のグラフを作成できるJavaScriptライブラリです。描画にはHTML5のcanvasを使用しています。

chartjs
Demo & Download

JS Charts

折線、棒、円グラフの3種類ですが、デザインやバリエーションが豊富になります。商用利用は有料になっています。

jscharts-01
jscharts-02
jscharts-03
Demo & Download

CanvasJS

シンプルな折線、棒、円グラフを作成することができます。こちらも商用利用は有料になっています。

CanvasJS
Demo & Download

morris

シンプルな折線、棒、円グラフを作成することができます。

morris
Demo & Download

NVD3

折線、棒、円グラフをはじめ、分布図や比較用のグラフを作成することができます。

nvd3
Demo & Download

チャート用のJavaScriptライブラリは今回紹介している5つ以外にも数多くありました。

より用途にあったライブラリを探してみてもよいと思います。

関連記事

インデックスタブ制作のチュートリアルまとめ

WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。 作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデ...続きを読む

2015.02.07HTMLコーディング

モバイル端末の画面サイズまとめ

WEBサイトを制作するときのサイズの基準になるのが画面の解像度です。 基本的には、ディスプレイサイズに合わせてデザインされるので、横幅が920px~1024pxあたりでレイアウトされるのが主流といえます。 最近では、スマートフォンやタブレットなどでWEBサイトを閲覧する機...続きを読む

2015.02.06HTMLコーディング

【WP】ワードプレスのカスタムメニュー機能を使う

WordPressではバージョン3.0より、管理画面内でメンテナンスができるカスタムメニューの機能が加わりました。WordPressで作成した固定ページや投稿記事のリンクをメニューに反映したり、動的にメニューを構築することができる便利な機能です。今回は、ワードプレスのカスタム...続きを読む

2015.08.18WordPress

【WP】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress

【JavaScript】国産ライブラリtmlib.jsを使ったアニメーション入門

「tmlib.js」はゲームやブラウザツールを簡単に作る事ができる国産のJavaScriptライブラリです。「tmlib.js」を使うとアニメーションや画像表示、サウンドなどゲームなどに必要な処理がプログラミングしやすいようになります。 WEBサイトなどにもアニメーショ...続きを読む

2015.03.11HTMLコーディング