marorika/setting-chart-js.html

## setting-chart-js.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">

        <!-- その他内容（任意） -->

    </head>
    <body>

        <!-- その他内容（任意） -->

        <!-- ①チャート描画先を設置 -->
        <canvas id="myChart" style="width: 100%; height: 300px;"></canvas>

        <!-- その他内容（任意） -->

        <!-- ②Chart.jsの読み込み -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

        <!-- ③チャート描画情報の作成 -->
        <script>
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar', // チャートのタイプ
                data: { // チャートの内容
                    labels: ["one", "two", "three", "four", "five", "six"],
                    datasets: [{
                        label: 'red',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 1
                    }, {
                        label: 'blue',
                        data: [10, 14, 6, 8, 1, 4],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 1
                    }]
                },
                options: { // チャートのその他オプション
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
        </script>

        <!-- その他内容（任意） -->

    </body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">

	<!-- その他内容（任意） -->

	</head>
	<body>

	<!-- その他内容（任意） -->

	<!-- ①チャート描画先を設置 -->
	<canvas id="myChart" style="width: 100%; height: 300px;"></canvas>

	<!-- その他内容（任意） -->

	<!-- ②Chart.jsの読み込み -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

	<!-- ③チャート描画情報の作成 -->
	<script>
	var ctx = document.getElementById("myChart");
	var myChart = new Chart(ctx, {
	type: 'bar', // チャートのタイプ
	data: { // チャートの内容
	labels: ["one", "two", "three", "four", "five", "six"],
	datasets: [{
	label: 'red',
	data: [12, 19, 3, 5, 2, 3],
	backgroundColor: 'rgba(255, 99, 132, 0.2)',
	borderWidth: 1
	}, {
	label: 'blue',
	data: [10, 14, 6, 8, 1, 4],
	backgroundColor: 'rgba(54, 162, 235, 0.2)',
	borderWidth: 1
	}]
	},
	options: { // チャートのその他オプション
	scales: {
	yAxes: [{
	ticks: {
	beginAtZero:true
	}
	}]
	}
	}
	});
	</script>

	<!-- その他内容（任意） -->

	</body>
	</html>