インタラクティブに！JavaScript Chart Library で操作できるグラフ・チャート

2024-04-07

JavaScript Chart Library でデータを可視化

主な機能

豊富なグラフ種類: 棒グラフ、折れ線グラフ、円グラフ、散布図など、様々な種類のグラフを作成できます。
データの読み込み: CSV ファイル、JSON ファイル、JavaScript 配列など、様々なデータソースからデータを読み込むことができます。
カスタマイズ: 色、フォント、サイズなど、グラフの様々な要素をカスタマイズできます。
インタラクティブ性: マウスオーバーやクリックなどの操作で、グラフ上の情報を表示することができます。

ライブラリの選び方

作成したいグラフの種類
データソース
カスタマイズ性
インタラクティブ性
ライセンス

学習リソース

各ライブラリの公式ドキュメント
チュートリアル

JavaScript Chart Library は、データを視覚的に表現し、ユーザーにわかりやすく情報を伝えるための強力なツールです。様々なライブラリが用意されているので、目的に合ったライブラリを選んで、データ可視化をしましょう。

<canvas id="myChart" width="400" height="400"></canvas>

const ctx = document.getElementById('myChart').getContext('2d');

const data = {
  labels: ['月', '火', '水', '木', '金', '土', '日'],
  datasets: [{
    label: '売上',
    data: [10, 20, 30, 40, 50, 60, 70],
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

const myChart = new Chart(ctx, config);

Highcharts を使った円グラフ

<div id="myChart"></div>

Highcharts.chart('myChart', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'ブラウザシェア'
  },
  series: [{
    data: [
      {
        name: 'Chrome',
        y: 60
      },
      {
        name: 'Firefox',
        y: 20
      },
      {
        name: 'Safari',
        y: 10
      },
      {
        name: 'Edge',
        y: 10
      }
    ]
  }]
});

Google Charts を使った折れ線グラフ

<div id="myChart"></div>

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['月', '売上'],
    ['1月', 10],
    ['2月', 20],
    ['3月', 30],
    ['4月', 40],
    ['5月', 50],
    ['6月', 60],
    ['7月', 70]
  ]);

  var options = {
    title: '売上推移',
    curveType: 'function',
    legend: {
      position: 'bottom'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('myChart'));
  chart.draw(data, options);
}