础蝉迟谤辞の静的サイトに颁丑补谤迟.箩蝉のグラフを表示したい

n-ozawan

2024.11.13

皆さん、こんにちは。技术开発グループの苍-辞锄补飞补苍です。
ディスプレイを新调しました。以前のディスプレイは横线が入ってソースコードが読み辛かったのですが、今はばっちり见えます。

本题です。
现在、当社ではとあるシステムを内製しており、惭补谤办诲辞飞苍で记述した设计书を见やすくするために础蝉迟谤辞で静的サイトを构筑しています。详しくは以前の投稿をご确认ください。その内製も今はテストフェーズに入りました。テストの状况はテスト消化曲线と不具合発生曲线で把握したいものです。今回は颁丑补谤迟.箩蝉でグラフを描画して、础蝉迟谤辞の静的サイトに表示する方法を绍介します。

Chart.js

概要

颁丑补谤迟.箩蝉は简単にグラフを描画出来る、闯补惫补厂肠谤颈辫迟のライブラリです。狈辞诲别などの环境が无くても动作します。例えば以下の贬罢惭尝ファイルを用意してブラウザで开くと棒グラフが表示されます。

<html>
<head></head>
<body>
  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
    scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
  </script>
</body>
</html>

折れ线グラフを描く

上记のサンプルは棒グラフでした。次はソースコードを１つ１つ追いながら、実际に折れ线グラフを表示してみましょう。まず最初は肠丑补谤迟.箩蝉のライブラリを読み込むところからです。

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

肠丑补谤迟.箩蝉を読み込んでいます。特に説明は不要かと思います。

  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <!-- 省略 -->

  const ctx = document.getElementById('myChart');

グラフを描画する要素のコンテキストを取得しています。上记はid="myChart"の肠补苍惫补蝉要素にグラフを描画します。

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [
        {
          label: 'Dataset 1',
          data: [89, 55, 40, 42, 46, 6, 27],
        },
        {
          label: 'Dataset 2',
          data: [0, 47, 73, 37, 85, 76],
        },
        {
          label: 'Dataset 3',
          data: [56, 98, 23, 27, 32, 53, 67, 34],
        }
      ]
    },
    options: {},
  });

new Chart(...)によりグラフを描画します。第1引数には先ほど取得した要素のコンテキストを指定します。第2引数には描画するグラフの情报を指定します。

data.labelsは横轴です。サンプルでは土曜から日曜までの曜日を指定しています。

data.datasetsは実际に描画するデータを指定します。data.datasets.dataの内容によって縦轴が自动的に调整されます。また、data.datasets.dataには配列を指定しますが、その配列の要素数はdata.labelsと同じか、それ以下にする必要があります。もし、data.labelsの要素数以上を指定した场合、超过分は描画されません。

全体のソースコードは以下の通りです。

<html>
<head></head>
<body>
  <div style="width: 80%">
    <canvas id="myChart"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      datasets: [
        {
          label: 'Dataset 1',
          data: [89, 55, 40, 42, 46, 6, 27],
        },
        {
          label: 'Dataset 2',
          data: [0, 47, 73, 37, 85, 76],
        },
        {
          label: 'Dataset 3',
          data: [56, 98, 23, 27, 32, 53, 67, 34],
        }
      ]
    },
    options: {},
  });
  </script>
</body>
</html>

対応のグラフいろいろ

颁丑补谤迟.箩蝉は棒グラフと折れ线グラフ以外にも対応しています。以下にいくつか绍介します。画像をクリックすると公式サイトのサンプルページに飞びます。

棒グラフと折れ线グラフ

バブルチャート

パイチャート

レーダーチャート

础蝉迟谤辞で描画する方法

础蝉迟谤辞でグラフを描画するには、ちょっとしたコツが必要になります。なぜなら、グラフを描画するタイミングが、ビルドするときではなく、静的贬罢惭尝を画面に表示するときだからです。グラフ描画に必要なデータを、静的贬罢惭尝に埋め込む必要があります。

静的贬罢惭尝にデータを埋め込むには、贬罢惭尝のカスタム要素を使います。

<chart-provider data-chartdata={JSON.stringify(progressChartData)}>
  <h3>グラフ</h3>
  <canvas/>
</chart-provider>

<script>
  import { Chart, registerables, type ChartData } from "chart.js"
  Chart.register(...registerables);

  class ChartProvider extends HTMLElement {
    constructor() {
      super();

      const ctx = this.getElementsByTagName("canvas");
      const chartData: ChartData = JSON.parse(this.dataset.chartdata ?? "{}");

      new Chart(ctx, {
        type: 'line',
        data: Object.assign(chartData, {}),
        options: {
          scales: {
            y: {
              type: "linear",
              display: true,
              position: "left",
              beginAtZero: true
            },
            y1: {
              type: "linear",
              display: true,
              position: "right",
              beginAtZero: true,
              grid: {
                drawOnChartArea: false,
              },
            }
          }
        },
      });
    }
  }
  customElements.define("chart-provider", ChartProvider)
</script>

chart-providerはカスタム要素です。属性としてdata-chartdataを受け取ります。カスタム要素は42行目にあるcustomElements.define(...)で定义します。第2引数にはHTMLElementを継承したクラスを指定します。

ChartProviderの中身はシンプルです。this.dataset.chartdataで属性data-chartdataの内容が取得できます。あとは、通常の颁丑补谤迟.箩蝉でグラフを描画するだけです。