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

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

関連記事

【Win10】Office 2016 の一部が英語表記になり戻らない

Microsoft Office 2016 を Windows10 の環境で利用していたところ、いつの間にか、画面の一部が英語になってしまいました。リボンなどのUI部分ではなく、作業中にポップアップされる操作画面のごく一部の日本語が英語になるという半端な状態です。 修正...続きを読む

2021.01.24Windows10パソコンの使い方

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

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

2015.02.10HTMLコーディング

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

【デザイン】室内の壁をクリエイティブに飾るデザインワーク

店舗やオフィスなど単調な壁面、インテリアや照明がないと少し寂しい雰囲気にもなります。 そのような室内の壁をクリエイティブに飾るアートワークをまとめてみました。 Smartdeco - Wall decoration design: asterisco*l...続きを読む

2015.02.14インスピレーション

ブログやWEBサイトのトラフィック(アクセス)を増やす方法

ブログやWEBサイトの集客・収益効果を高めるために、トラフィック(アクセス)を増やすことは重要な課題といえます。 一般的にトラフィック(アクセス)を増やすためには有料広告が確実に効果がある方法ですが、立ち上げたばかりのサイトや予算をかけることが出来ない場合は、お金をかけ...続きを読む

2015.02.14SEO