chartjsを使って、ラインチャート（折れ線グラフ）を作った時のはなし

chartjsでラインチャート（折れ線グラフ）を作った。

ラインのポイント調整やY軸のメモリ幅調整を実装したので、残しておく。

確認環境

• macOS 13.2
• docker desktop 4.16.2
• vue 3.2.45
• chartjs 2.9.4
• vue-chartjs 3.5.1

ラインチャートの作り方

canvasタグにラインチャートを描画する

data, optionsをそれぞれ宣言して、new Chartに()に渡す

template

<div style="position: relative; width: 80vw; height: 50vh">
    <canvas id="canvas" />
</div>

script

import { onMounted } from "vue";
import { Chart } from "chart.js";
...
onMounted(() => {
  const ctx = document.getElementById("canvas");
  if (ctx)
    new Chart(ctx, {
      type: "line",
      data,
      options,
      plugins: {},
    });
});

data

datasetsに表示対象のデータ情報を指定
labelは凡例になり、data配列がlabelsと紐づく

fillをtrueにすると、ライン下が塗りつぶされる

lineTension: trueやsteppedLine: trueをつけると、グラフの描画方法が変わる

pointRadiusを1にすると、ポイントが見えない、デフォルト値は「3」

const data = {
  datasets: [
    {
      label: "January 1月",
      fill: false, // ラインの下を塗りつぶす
      backgroundColor: "#d3f8e2",
      borderColor: "#d3f8e2",
      pointRadius: 1,
      pointHoverRadius: 1,
      data: [46, 0, 43, 10, 70, 60, 19],
    },
    {
      label: "February 2月",
      fill: false,
      backgroundColor: "#e4c1f9",
      borderColor: "#e4c1f9",
      pointRadius: 1, // ポイントのサイズ
      pointHoverRadius: 1, // ホバー時のポイントのサイズ
      data: [18, 60, 13, 30, 30, 11, 69],
    },
  ],
  labels: [
    "0分",
    "10分",
    "20分",
    "30分",
    "40分",
    "50分",
    "60分",
  ],
};

options

const options = {
  legend: { display: true, position: "bottom" },
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true, // 0から開始
          stepSize: 20, // ラベルを20%間隔で表示
          max: 80, // 上限を80%に設定
          callback: (tick) => {
            if (tick === 80) return [tick.toString() + "%", "以上"]; // 80%の場合は、「以上」を付与
            return tick.toString() + "%";
          },
        },
        scaleLabel: {
          // Y軸タイトル
          display: true,
          labelString: "視聴率",
        },
      },
    ],
    xAxes: [
      {
        ticks: {
          stepSize: 20,
          maxTicksLimit: 3, // ラベルの表示数を限定
          maxRotation: 0,
          minRotation: 0,
        },
        scaleLabel: {
          display: true,
          labelString: "視聴時間",
        },
      },
    ],
  },
  tooltips: {
    mode: "x", // X軸に属する値をまとめて表示
    enabled: true,
    intersect: false, // マウスの位置が要素と交差する場合にのみ表示
    callbacks: {
      label: (context, data) => {　// January: 84% のように表示
        let label = data.datasets[context.datasetIndex].label || "";
        if (label) label += " : ";
        label += context.value + "%";
        return label;
      },
    },
  },
};

scalesについて

Y軸とX軸の表示設定ができる

ticksで、メモリ幅や上限、下限、表示内容の調整ができる
Y軸の値が80の場合は、サフィックスに「以上」を付与する処理を入れた

参考

• https://www.chartjs.org/docs/2.9.4/charts/line.html