【LWC】Chart.jsを使用してグラフを描画する

<template>
  <lightning-card>
    <canvas width="600" height="300"></canvas>
  </lightning-card>
</template>

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import chartjs from "@salesforce/resourceUrl/chartjsVer442"; //静的リソースからchart.jsファイルをimport

export default class ChartComponent extends LightningElement {
  chart;
  connectedCallback() {
    //chart.jsファイルを読み込む
    loadScript(this, chartjs)
      .then(() => {
        this.drawChart();
      })
      .catch((error) => {
        console.log(error);
      });
  }

  //グラフ描画メソッド
  drawChart() {
    //Canvasを取得
    const ctx = this.template.querySelector("canvas").getContext("2d");
    this.chart = new Chart(ctx, {
      type: "bar",
      //グラフデータ
      data: {
        labels: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ],
        datasets: [
          {
            label: "売上高",
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgb(255, 99, 132)",
            data: [
              1000000, 900000, 1300000, 830000, 1000000, 1500000, 2000000,
              1000000, 900000, 1300000, 1800000, 2300000
            ]
          }
        ]
      }
    });
  }
}

public with sharing class ChartComponentController {
  //chartのラベルと数値のリストを持った内部クラス
  public class ChartData {
    @AuraEnabled
    public List<String> chartLabels = new List<String>();
    @AuraEnabled
    public List<Decimal> chartDatasets = new List<Decimal>();
  }

  @AuraEnabled
  public static ChartData getChartData() {
    ChartData chartData = new ChartData();
    //売上高レコードを取得
    List<AmountOfSales__c> records = getRecord();
    //内部クラスにレコードの情報をセット
    for (AmountOfSales__c rec : records) {
      chartData.chartLabels.add(rec.Month__c);
      chartData.chartDatasets.add(rec.AmountOfSales__c);
    }
    return chartData;
  }

  private static List<AmountOfSales__c> getRecord() {
    return [
      SELECT Id, AmountOfSales__c, Month__c
      FROM AmountOfSales__c
      ORDER BY Month__c ASC
    ];
  }
}

import { LightningElement } from "lwc";
import { loadScript } from "lightning/platformResourceLoader";
import chartjs from "@salesforce/resourceUrl/chartjsVer442"; //静的リソースからchart.jsファイルをimport
import getChartData from "@salesforce/apex/ChartComponentController.getChartData";

export default class ChartComponent extends LightningElement {
  chart;
  labels = [];
  datasets = [];
  connectedCallback() {
    //chart.jsファイルを読み込む
    loadScript(this, chartjs)
      .then(() => {
        //Apexからグラフデータを取得
        getChartData({}).then((result) => {
          this.labels = result.chartLabels; //ラベル値を変数に保持
          this.datasets = result.chartDatasets; //売上高の数値を変数に保持
          this.drawChart();
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  //グラフ描画メソッド
  drawChart() {
    //Canvasを取得
    const ctx = this.template.querySelector("canvas").getContext("2d");
    this.chart = new Chart(ctx, {
      type: "bar",
      //グラフデータ
      data: {
        labels: this.labels, //変数を設定
        datasets: [
          {
            label: "売上高",
            backgroundColor: "rgb(255, 99, 132)",
            borderColor: "rgb(255, 99, 132)",
            data: this.datasets //変数を設定
          }
        ]
      }
    });
  }
}