1 単純な折れ線
<!doctype html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="x"></canvas>
<!-- ここはHTML -->
<script>
// ここにプログラム
new Chart("x",{
type: "line",
data: {
labels: [1,2,3,4],
datasets: [
{data: [20,30,40,10]}
]
},
});
</script>
（HTMLファイルへの直リンク）
2 ２つのデータ系列（棒グラフ）
<!doctype html>
<meta charset="utf-8"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myBarChart_01 = new Chart(ctx, {
type: 'bar',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
data: [60, 40, 10, 90, 50, 30],
},{
data: [60, 40, 10, 20, 30, 30],
}]
},
});
</script>
（HTMLファイルへの直リンク）