<!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 ='ChartID3' style="width: 800px; height: 400px; margin: auto;"></canvas>
    <script>
        var ramdomval;
        var ramdomval2;
        var sz =7;

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

        var ctx = document.getElementById('ChartID3').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,
                    borderColor: 'red', //線の色
                    backgroundColor: 'red', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'triangle', //プロットした点の表示（△）
                    tension: 0, //線の伸縮
                    yAxisID: 'y', //軸のスケールを選択
                },
                {
                    type:'line',
                    label: 'sample2',
                    data: ramdomval2,
                    borderColor: 'blue', //線の色
                    backgroundColor: 'blue', //下を塗りつぶした時の色
                    fill: false, //プロット点から下を塗りつぶす
                    borderWidth: 1, //線の幅
                    pointRadius: 1, //プロットした点の大きさ
                    pointHoverBorderWidth: 1, //選択した時に大きく表示するサイズ
                    pointStyle: 'rect', //プロットした点の表示（□）
                    tension: 0, //線の伸縮
                    yAxisID: 'y2', //軸のスケールを選択
                }]
            },
            options: {
                responsive: true,
                plugins: { //表示タイトルをつける場合
                    title: {
                        display: true,
                        text: 'サンプルグラフ2軸',
                        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--
                    },
                    y2: {
                        display: true, //y2軸を表示するか
                        min: 0,
                        max: 200,
                        position: 'right', //軸を右側に表示
                        ticks:{
                            display: true,  //目盛りを表示するか
                            color: 'blue',
                        },
                        title: { //y2軸のタイトルを入れる場合
                            display: true,　//y2軸のタイトルを表示するか
                            text: 'サンプルデータ2値',
                            color: 'blue',
                            font: {
                                size: 16
                            }
                        }, //y2軸のタイトルを入れる場合--end--
                    }
                }
           }
        });
    </script>
</body>
</html>