(Sample)

折れ線グラフを表示する

Chart.jsというJavaScriptのライブラリを使用することで簡単に折れ線グラフを作成することができます。

ポイントは以下の3点です。

①　8行目のリンクでCDNを読み込んでいる点

②　20行目以降でグラフのインスタンスを生成している点

③　21行目でグラフの種類を指定している点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>lineChartJs.html</title>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
            integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg=="
        crossorigin="anonymous"></script>
        <script
        src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </head>
    <body>
        <div style="width:500px">
            <canvas id="temperature"></canvas>
        </div>
        <p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
        <script>
            let ctx = document.getElementById('temperature');
            let myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datasets: [{
                            label: '最高気温',
                            data: [31, 33, 33, 32, 33, 35, 30],
                            borderColor: '#f88',
                        }, {
                            label: '最低気温',
                            data: [24, 25, 26, 25, 26, 26, 26],
                            borderColor: '#48f',
                        }],
                },
                options: {
                    y: {
                        min: 0,
                        max: 40,
                    },
                },
            });
        </script>
    </body>
</html>
Webアプリケーション制作のための小ネタ集　目次に戻る