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

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

関連記事

【JavaScript】フォームの入力チェックができるライブラリ『Validatr』

お問い合わせフォームなどの入力フォームで入力された値をチェックや未入力をチェックする事ができるJavaScriptライブラリ『Validatr』をご紹介します。 『Validatr』はjQueryをベースに開発され、MIT License にて公開さております。電子メー...続きを読む

2015.02.14HTMLコーディング

株式会社寺坂商店との業務提携のお知らせ

拝啓 時下ますますご清栄のこととお喜び申し上げます。 平素は格別のご高配を賜り、厚く御礼申し上げます。 さて、このたび当社は、株式会社寺坂商店(本社:静岡県藤枝市藤枝5-17-3、代表取締役:寺坂 祐紀)との間で、業務提携を行うことを決議いたしましたので、お知らせい...続きを読む

2022.07.22

【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2015.02.06BootstrapHTMLコーディング

カフェオールドソーコ様WEBサイト制作

富士市でモチモチの生パスタと焼きたてワッフルを楽しむことができる『カフェ オールドソーコ』様のWEBサイトを制作いたしました。手書きのメニューや店内に描かれた可愛らしいイラストにあわせてWEBサイトでもイラストを沢山用いて、ワクワク感を感じられるデザインをいたしました。 ...続きを読む

2015.02.14WEBサイト制作

【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。 実装イメージ 『iCheck』はいくつかのスキンデータも用意され...続きを読む

2015.02.10HTMLコーディング