【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つ以外にも数多くありました。

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

関連記事

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。 そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimen...続きを読む

2015.02.10HTMLコーディング

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

【デザイン】シングルページデザイン海外のクリエイティブWEBサイトまとめ

シングルページデザインは、1ページ内に「お知らせ」「コンセプト」「サービス紹介」「会社概要」「お問い合わせ」などのサイトを構成する一般的な情報をすべて集約したデザインです。従来サイトで、訪問者がページを見て必要な情報が無いと判断して離脱してしまうことを防ぐことから設計されたデ...続きを読む

2015.02.16インスピレーション

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作