<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "UTF-8">
    <script src = "chart.umd.js"></script><!-- ライブラリをダウンロードしている場合 -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
    <!-- chart.umd.jsを読み込む -->
</head>
<body>
    <canvas id ='ChartID' style="width: 800px; height: 400px; margin: auto;"></canvas>
    <script>
        var ramdomval;
        var sz =7;

        ramdomval = [sz];
        for( i=0; i < sz; i++){
            ramdomval[i] = Math.random() * 100;
        }

        var ctx = document.getElementById('ChartID').getContext('2d');
        var myChart = new Chart( ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7],
                datasets: [{
                    type:'line',
                    label: 'sample1',
                    data: ramdomval,//[10,20,30,40,30,20,10],
                    //以下は線の種類に関する設定
                    borderColor: 'red', //線の色
                    backgroundColor: 'red', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'triangle', //プロットした点の表示（△）
                    tension: 0, //線の伸縮
                    yAxisID: 'y', //軸のスケールを選択
                }]
            },
            options: {
                responsive: true,
                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        text: 'サンプルグラフ',
                        font: {
                            size: 20
                        }
                    },
                }, //表示タイトルをつける場合--end--
                scales: {
                    x: {
                        display: true,
                        ticks: {
                            display: true
                        },
                        title: { //X軸のタイトルを入れる場合
                            display: true,
                            text: 'サンプルプロット数',
                            color: 'black',
                            font: {
                                size: 16
                            }
                        }, //X軸のタイトルを入れる場合--end--
                    },
                    y: {
                        display: true, //y軸を表示するか
                        min: 0,
                        max: 100,
                        ticks: {
                            display: true, //目盛りを表示するか
                            color: 'red',
                        },
                        title: { //Y軸のタイトルを入れる場合
                            display: true, //ｙ軸のタイトルを表示するか
                            text: 'サンプルデータ値',
                            color: 'red',
                            font: {
                                size: 16
                            }
                        }, //Y軸のタイトルを入れる場合--end--
                    },
                }
           }
        });
    </script>
</body>
</html>