レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。
1. Chart.js
Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。
Chart.jsの読み込み
まずはファイルをダウンロードするか、CDN経由でファイルを読み込みます。
HTML
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> |
npm
インストールには npm か Bower が用意されています。
1 | npm install chart.js --save |
Bower
1 | bower install chart.js --save |
Chart.jsを使った例
HTML
1 | <canvas id="myChart"></canvas> |
body 内にはIDをつけた canvas 要素を設置。ここにグラフが表示されます。
JavaScript
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | new Chart(document.getElementById("myChart"), { type: "doughnut", data: { labels: ["赤", "青", "黄色"], datasets: [ { data: [300, 50, 100], backgroundColor: [ "rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)" ] } ] }}); |
JavaScriptで canvas 要素のIDを指定し、type でグラフの種類を記述。この例では円グラフの仲間のドーナツグラフを作成しています。data で数値、backgroundColor で各項目の色を設定。
こんな感じのグラフが完成しました！アニメーションもいい感じ。
各項目にカーソルを合わせるとラベルと数値が表示されます。また上部のラベルをクリックすると非表示にもできますよ。
グラフの種類、アニメーション、色や表示方法など、カスタマイズ性も抜群。ぜひ試してみてください！
2. Frappé Charts
Frappé Chartsはシンプルなコードで本格的なグラフを表示できます。カスタマイズ性はChart.jsに劣りますが、手軽に実装するには申し分ないでしょう。
Frappé Chartsを読み込み
ファイルをダウンロード、またはCDNが用意されているのでそちらを読み込みます。
HTML
1 | <script src="https://unpkg.com/frappe-charts@0.0.5/dist/frappe-charts.min.iife.js"></script> |
npm
インストールには npm が用意されています。
1 2 3 4 | npm install frappe-charts# 読み込みimport Chart from "frappe-charts/dist/frappe-charts.min.esm" |
Frappé Chartsを使った例
HTML
1 | <div id="chart"></div> |
JavaScript
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | let data = { labels: ["2月", "4月", "6月", "8月", "10月", "12月"], datasets: [ { title: "Readingスコア", color: "light-blue", values: [5, 5.5, 6, 5.5, 5.5, 6.5] }, { title: "Writingスコア", color: "orange", values: [6, 6.5, 6, 6, 6.5, 7] } ]};let chart = new Chart({ parent: "#chart", // or a DOM element title: "IELTS スコア", data: data, type: "line", height: 250, format_tooltip_x: d => (d + "").toUpperCase(), format_tooltip_y: d => d + " pts"}); |
labels にはグラフのラベルを、datasets には値を記述。色は以下のものが記述できます：
- green
- blue
- violet
- red
- orange
- yellow
- light-blue
- light-green
- purple
- magenta
- grey
- dark-grey
type にはグラフの種類を以下から記述：
- bar
- line
- scatter
- pie
- percentage
グラフにカーソルを合わせると各ラベルと数値も表示されます。
3. Chartist.js
Chartist.jsでは曲線やデフォルトの色が可愛らしいグラフを作成できます。レスポンシブやアニメーションにも対応しており、より豊かに、わかりやすく表示できます。
Chartist.jsを読み込み
CSSとJavaScriptの2つのファイルが必要です。ダウンロードするか、CDNのものを利用。
HTML
1 2 3 4 | <head> <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"> <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script></head> |
bower
bowerでインストールも可能
1 | bower install chartist --save |
Chartist.jsを使った例
HTML
1 | <div class="ct-chart"></div> |
JavaScript
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | var data = { labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'], series: [ [5, 4, 3, 7, 5, 8], [3, 2, 8, 5, 4, 6], [2, 1, 3, 4, 2, 5] ]};var options = { height: 300};new Chartist.Line('.ct-chart', data, options); |
値は series に記述します。
様々なオプションが用意されているので、試してみるといいですね。ちなみにAngular版もあるので、必要であればそちらを使ってみてください：
その他おすすめのJavaScriptライブラリーがあれば教えてくださいね！
