Chart.js3.9.1で棒グラフを作成してみる

こんにちは、Kuniです。先日ポートフォリオサイトでChart.js(ver3.9.1)を利用して棒グラフを作成しました。作成方法を共有します。

前提：棒グラフ、x軸方向へのグラフ(グラフが横向き)

1. Chart.jsをHTMLファイルで利用できるようにする

まず始めに、Chart.jsを利用できるように、以下のコードをグラフを作成する前のいずれかに置きます。

Chart.jsの読み込み

<!-- Chart.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Jsファイルを作成し、それをHTMLファイルで読み込み、描画する

続いて作成したいグラフのjsファイルを作成し、それをHTMLファイルで表示できるようにします。今回はfrontend.jsを読み込みます。

frontend.jsの読み込み

<canvas id="frontend" width="100" height="30"></canvas>
<script src="js/frontend.js"></script>

width・heightでグラフの横幅・高さを設定できます。 　　

またfrontend.jsは以下の通りです。

frontend.js

const labels_frontend = [
  'HTML',
  'CSS',
  'JavaScript',
  'Bootstrap',
];

const data_frontend = {
  labels: labels_frontend,
  datasets: [{
    label: '',
    data: [80, 70, 50, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
    ],
    borderWidth: 1.5,
    maxBarThickness: 80,
    barPercentage: 1.0,
  }]
};

const config_frontend = {
  type: 'bar',
  data: data_frontend,
  options: {
    plugins: {
      legend: {
          display: false,
          labels: {
              color: 'rgb(255, 99, 132)',
          },
      },
  },
    // responsive: true,
    indexAxis: 'y',
    // scaleShowLabels : false,
    scales: {
      title: {
        display:false,
      },
      x: {
        suggestedMin: 0,
        suggestedMax: 100,
      },
       y: {
        //  beginAtZero: true,
       },
    }
  },
};

const frontend = new Chart(
  document.getElementById('frontend'),
  config_frontend
);

3. Jsファイルの各変数に関する説明

次にfrontend.jsの中身に関して説明していきます。

labels_frontendでは軸の値を設定しています。

labels_frontend

const labels_frontend = [
  'HTML',
  'CSS',
  'JavaScript',
  'Bootstrap',
];

次にdata_frontendでは、グラフを描画する上でのラベルや色、グラフの棒の太さや透過率などを設定できます。

data_frontend

const data_frontend = {
  labels: labels_frontend,
  datasets: [{
    label: '',
    data: [80, 70, 50, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
    ],
    borderWidth: 1.5,
    maxBarThickness: 80,
    barPercentage: 1.0,
  }]
};

次にconfig_frontendでは、data_frontendで記述したパラメータから、グラフを決定していきます。ここでグラフの種類を設定することや、ラベルの有無を設定すること、グラフの最大値・最小値の設定ができます。

config_frontend

const config_frontend = {
  type: 'bar',
  data: data_frontend,
  options: {
    plugins: {
      legend: {
          display: false,
          labels: {
              color: 'rgb(255, 99, 132)',
          },
      },
  },
    // responsive: true,
    indexAxis: 'y',
    // scaleShowLabels : false,
    scales: {
      title: {
        display:false,
      },
      x: {
        suggestedMin: 0,
        suggestedMax: 100,
      },
       y: {
        //  beginAtZero: true,
       },
    }
  },
};

最後にfrontendではhtmlファイルのcanvasを読み込み、そこにconfig_frontend(決定したグラフ)を記述します。

frontend

const frontend = new Chart(
  document.getElementById('frontend'),
  config_frontend
);

また以下のリンクでグラフ作成において詰まった点に関して記述しているので良ければご覧ください。
Chart.js3.9.1におけるパラメータの設定

参考になれば嬉しいです！！