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

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

関連記事

「アイミツ」にて弊社を紹介していただきました

株式会社ユニラボ ( unilabo Inc. )が運営する「アイミツ」にて、『「本当におすすめできる9社をピックアップ」静岡市のホームページ制作会社をアイミツが徹底調査! 』として、デザインスタジオ・エフを紹介していただきました! https://imit...続きを読む

2020.11.27

個性こそが美? 〜ロマン主義と「魂の表現」〜

「カノン」からの決別 18世紀末〜19世紀初頭、フランス革命や産業革命によって社会が大きく揺れ動く中、 人々の心には、理性や秩序では語り尽くせない“不安”や“希望”が渦巻いていました。 そんな時代に登場したのが、「ロマン主義(Romanticism)」です。 美しさとは...続きを読む

2025.07.24カノンデザイン論ロマン主義

【デザイン】印象に残るビジネスカードデザイン

名刺は自分たちのことを覚えてもらうために重要なビジネスツールです。そこで受け取ったら印象に残るであろうデザインのビジネスカードを集めてみました。 Tok&Stok(Business Card) ブラジルの家具メーカー「Tok&Stok」のビジネスカード...続きを読む

2015.02.15インスピレーション

Googleウェブマスター向けの情報からみるSEOの必要性について

WEBサイトの制作において、お客様よりSEOについての相談、要望をいただくことがあります。 またSEOを専門に行っている業者で、どの業者を選んでよいかわからないといった相談もありました。 今回は、Googleよりウェブマスター向けに公開されている記事で、SEOについて...続きを読む

2015.02.14SEO

焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」

カメラマンとして、焼津おんぱく2018 「No30.焼津のスポットを歩き巡る インスタ映えする写真の撮り方講座」のプログラムの案内人をしました。 風が強く、雲が少し多い日でしたが、天気にも恵まれ、タイミングにもめぐまれ、参加者さんみんなに楽しんでいただき、焼津の魅力を再発見...続きを読む

2018.02.14フォトギャラリー焼津