自分だけのクイズを作成しよう - Quipha
スポンサーリンク

Chart.jsの導入と実装

JavaScript

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回はChart.jsを利用して、グラフを表示する簡単なWebアプリケーションを作成してみます。

解説自体は、実践を想定してLaravelのプロジェクトで行いますが、必須ではありません。
Chart.jsはNPMでのインストール、Vite(またはLaravel Mix)でビルドを行いました。

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 8 or 9 or 10
  • Chart.js 4.2.1

2022/10/02 WindowsとMacを使い、最新バージョンで確認しました。
Vite版の対応を追加しました。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Chart.jsとは

Chart.jsは、ウェブページにチャートやグラフを簡単に埋め込むことができるオープンソースのJavaScriptライブラリです。
データの可視化を手軽に行うことができ、様々ななチャートタイプをサポートしています。

Chart.js | Chart.js
Open source HTML5 Charts for your website

また、MITライセンスで利用可能です。
Chart.jsのコーディングは直感的で豊富なドキュメントがあり、初心者でも簡単に使い始めることができます。
高度なカスタマイズが可能で、チャートの外観、色、スタイル、アニメーションなどを細かく設定することができます。

リアルタイムのデータを表示するための機能もサポートしており、動的にデータを更新することができます。

これらの特徴が、ウェブ開発者やデータアナリストの間でChart.jsが広く使われている理由です。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

Chart.jsのインストール

今回はLaravelプロジェクトで、Chart.jsを使ってみました
もちろんLaravel以外でも利用することができます。

Laravelのプロジェクトは別途用意してください。
プロジェクト直下で、npmコマンドを利用して、Chart.jsをインストールします。

$ sail npm install chart.js

package.jsonに以下の定義が追加されました。

{
...
    "dependencies": {
        "chart.js": "^4.2.1"
    }
}

ちなみに、NPMを利用せずともCDNからChart.jsを読み込むこともできます。

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

Chart.jsの表示

Laravelで画面を一つ追加しましょう。web.phpを修正しました。

routes\web.php
Route::get('/chartjs', function () {
    return view('chartjs');
});

ビューファイルを作成し、jsの読み込みと、チャートを表示するためのタグを追加します。

最新のLaravelはViteに置き換わっておりますので、以下のファイルを作成します。

resources\views\chartjs.blade.php
<html>
    <head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</body>
</html>

もしLaravel Mixの場合は、以下のようにします。

resources\views\chartjs.blade.php
<html>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Chart.jsの処理を記述するJavaScriptファイルを用意しました。

resources\js\chartjs.js
import Chart from "chart.js/auto";

const ctx = document.getElementById("myChart").getContext("2d");
const 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],
                backgroundColor: [
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)",
                    "rgba(255, 159, 64, 0.2)",
                ],
                borderColor: [
                    "rgba(255, 99, 132, 1)",
                    "rgba(54, 162, 235, 1)",
                    "rgba(255, 206, 86, 1)",
                    "rgba(75, 192, 192, 1)",
                    "rgba(153, 102, 255, 1)",
                    "rgba(255, 159, 64, 1)",
                ],
                borderWidth: 1,
            },
        ],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
            },
        },
    },
});

app.jsを修正します。一行だけ追加しました。(chartjs.jsの読み込み)

resources\js\app.js
import './chartjs';

Viteはrequireが使えないので注意です。

jsファイルをビルドします。開発時ですのでdevを指定しました。
(ViteでもMixでも同様)

$ sail npm run dev

Viteの場合で、本番用にJS/CSSを出力する場合は、以下のコマンドを実行します。

$ sail npm run build

Viteについては以下の記事にもまとめました。

Laravelプロジェクトの開発サーバーを起動し、以下のURLにアクセスします。

http://localhost/chartjs

グラフを表示することが出来ました。とても簡単ですね!

チャート種類

何種類かサンプルでチャートを作成してみました。

折れ線グラフ

import Chart from "chart.js/auto";

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: ["月", "火曜", "水曜", "木曜", "金曜", "土曜", "日曜"],
        datasets: [
            {
                label: "data 1",
                data: [12, 19, 3, 5, 2, 3, -10],
                borderColor: "rgb(75, 192, 192)",
                backgroundColor: "rgba(75, 192, 192, 0.5)",
            },
            {
                label: "data 2",
                data: [8, 9, 13, 15, 1, 14, 1],
                borderColor: "rgb(153, 102, 255)",
                backgroundColor: "rgba(153, 102, 255, 0.5)",
            },
        ],
    }
});

バブルチャート

import Chart from "chart.js/auto";

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
    type: "bubble",
    data: {
        datasets: [
            {
                label: "data 1",
                data: [
                    { x: 52.27194787, y: 98.76457476, r: 10.503086419753085 },
                    { x: 53.04955418, y: 61.78497942, r: 11.320001714677641 },
                    { x: 87.05761317, y: 3.71484911, r: 9.449159807956104 },
                    { x: 92.56772977, y: 70.23319616, r: 8.748585390946502 },
                    { x: 70.81447188, y: 14.42644033, r: 12.705932784636488 },
                    { x: 63.77314815, y: 41.23285322, r: 9.994041495198903 },
                    { x: 98.6042524, y: 18.55366941, r: 6.6931584362139915 },
                ],
                borderColor: "rgb(75, 192, 192)",
                backgroundColor: "rgba(75, 192, 192, 0.5)",
            },
            {
                label: "data 2",
                data: [
                    { x: 68.44478738, y: 74.19667353, r: 12.86111111111111 },
                    { x: 72.92609739, y: 96.47633745, r: 13.307656035665294 },
                    { x: 32.8600823, y: 53.22102195, r: 6.621999314128944 },
                    { x: 19.85168038, y: 23.4430727, r: 13.328832304526749 },
                    { x: 68.46879287, y: 93.5622428, r: 13.58247599451303 },
                    { x: 54.02006173, y: 1.85013717, r: 12.722436556927299 },
                    { x: 36.99931413, y: 49.54132373, r: 13.495627572016462 },
                ],
                borderColor: "rgb(153, 102, 255)",
                backgroundColor: "rgba(153, 102, 255, 0.5)",
            },
        ],
    },
});

ドーナツチャート

import Chart from "chart.js/auto";

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
    type: "doughnut",
    data: {
        labels: ["月", "火曜", "水曜", "木曜", "金曜", "土曜", "日曜"],
        datasets: [
            {
                label: "data 1",
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)",
                    "rgba(255, 159, 64, 0.2)",
                ],
            },
        ],
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: "top",
            },
            title: {
                display: true,
                text: "ドーナツチャート",
            },
        },
    },
});

非常に多くの種類に対応しています。サンプルは以下をご覧ください。

Vertical Bar Chart | Chart.js
Open source HTML5 Charts for your website
スポンサーリンク

カスタマイズ

凡例を下に表示

先程のドーナツチャートを例にしてみましょう。
凡例を下に表示する場合は、optionsを指定します。

    options: {
        responsive: true,
        plugins: {
            legend: {
                position: "bottom",
            },
            title: {
                display: true,
                text: "ドーナツチャート",
            },
        },
    },

凡例を下に表示することができました。

非常に多くのカスタマイズ・設定が可能です。

Laravelからのデータ取得

Laravelのコントローラを介して、グラフに表示するためのデータを取得し表示してみましょう。

以下のコマンドでコントローラを作成します。

$ sail php artisan make:controller ChartController

web.phpを修正し、ルーティングを追加します。

use App\Http\Controllers\ChartController;

// チャートデータ取得処理
Route::get('/chart-get', [ChartController::class, 'chartGet'])->name('chart-get');
App\Http\Controllers\ChartController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ChartController extends Controller
{
    /**
     * チャートデータを取得
     */
    public function chartGet()
    {
        // 固定データを返却。DBからデータを取得すると良い
        return [12, 19, 31, 25, 2, 26, 87];
    }
}

今回は、コントローラからは固定のデータを返却しましたが、データベースと連携することにより、動的にグラフを表示できるようになります。

chartjs.jsを開き、非同期通信を行うためのaxiosを追加します。

resources\js\chartjs.js
import axios from 'axios';

JavaScriptファイルを修正しましょう。データ部分はコントローラから取得するように変更しました。

resources\js\chartjs.js
import Chart from "chart.js/auto";
import axios from 'axios';

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: ["月", "火曜", "水曜", "木曜", "金曜", "土曜", "日曜"],
        datasets: [
            {
                label: "data 1",
                //data: コントローラから取得,
                borderColor: "rgb(75, 192, 192)",
                backgroundColor: "rgba(75, 192, 192, 0.5)",
            },
        ],
    },
});

// Laravelのチャートデータ取得処理の呼び出し
axios
    .get("/chart-get")
    .then((response) => {
        // Chartの更新
        myChart.data.datasets[0].data = response.data;
        myChart.update();
    })
    .catch(() => {
        alert("失敗しました");
    });

コントローラからは、dataの配列のみ取得しましたが、datasets相当のデータをコントローラから返却するのも良いと思います。

これで処理の流れができました。実際に試してみましょう。
以下のURLにアクセスします。

http://localhost/chartjs

データはコントローラから取得し、チャートを表示することができました。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

Chart.jsは、とても高機能でカスタマイズしやいので、ぜひ活用してみましょう。

他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました