レスポンシブ対応!Webサイトにグラフを表示できるJavaScriptライブラリー3つ

グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。

1. Chart.js


公式サイトサンプルドキュメントGitHub

Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか?手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応!どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。

Chart.jsの読み込み

まずはファイルをダウンロードするか、CDN経由でファイルを読み込みます。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

npm

インストールには npm か Bower が用意されています。

npm install chart.js --save

Bower

bower install chart.js --save

Chart.jsを使った例

HTML

<canvas id="myChart"></canvas>

body 内にはIDをつけた canvas 要素を設置。ここにグラフが表示されます。

JavaScript

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 で各項目の色を設定。

See the Pen Chart.js Demo by Mana (@manabox) on CodePen.

こんな感じのグラフが完成しました!アニメーションもいい感じ。

各項目にカーソルを合わせるとラベルと数値が表示されます。また上部のラベルをクリックすると非表示にもできますよ。

グラフの種類、アニメーション、色や表示方法など、カスタマイズ性も抜群。ぜひ試してみてください!

2. Frappé Charts


公式サイトGitHub

Frappé Chartsはシンプルなコードで本格的なグラフを表示できます。カスタマイズ性はChart.jsに劣りますが、手軽に実装するには申し分ないでしょう。

Frappé Chartsを読み込み

ファイルをダウンロード、またはCDNが用意されているのでそちらを読み込みます。

HTML

<script src="https://unpkg.com/frappe-charts@0.0.5/dist/frappe-charts.min.iife.js"></script>

npm

インストールには npm が用意されています。

npm install frappe-charts

# 読み込み
import Chart from "frappe-charts/dist/frappe-charts.min.esm"

Frappé Chartsを使った例

HTML

<div id="chart"></div>

JavaScript

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

See the Pen Frappé Charts Demo by Mana (@manabox) on CodePen.

グラフにカーソルを合わせると各ラベルと数値も表示されます。

3. Chartist.js


公式サイトサンプルドキュメントGitHub

Chartist.jsでは曲線やデフォルトの色が可愛らしいグラフを作成できます。レスポンシブやアニメーションにも対応しており、より豊かに、わかりやすく表示できます。

Chartist.jsを読み込み

CSSとJavaScriptの2つのファイルが必要です。ダウンロードするか、CDNのものを利用。

HTML

<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でインストールも可能

bower install chartist --save

Chartist.jsを使った例

HTML

<div class="ct-chart"></div>

JavaScript

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 に記述します。

See the Pen Chartist.js Demo by Mana (@manabox) on CodePen.

様々なオプションが用意されているので、試してみるといいですね。ちなみにAngular版もあるので、必要であればそちらを使ってみてください:


その他おすすめのJavaScriptライブラリーがあれば教えてくださいね!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)