practice

　　　　

<html>
<meta charset="utf-8">

<script src="jquery-3.4.1.min.js"></script>
<script src="chart.js"></script>
<script>
$(()=>{項目=["","1月","2月","3月","4月","5月","6月",""];
情報={labels:項目,
datasets:[{label:"リンゴ",
backgroundColor:"#ff88cc",
borderColor:"#ffffff",
data:[78,62,83,47,36,71,28,0],},
{label:"イチゴ",
backgroundColor:"#ff00aa",
borderColor:"#ffffff",
data:[0,77,60,75,52,48,16,0],},
{label:"バナナ",
backgroundColor:"#ddff00",
borderColor:"#ffffff",
data:[0,13,33,68,72,84,91,0],},
{label:"ミカン",
backgroundColor:"#ffdd88",
borderColor:"#ffffff",
data:[0,94,82,68,71,45,13,0],}]};
追加={title:{display:true,
text:"成績表"},
animation:{duration:1000},
plugins:{tooltip:{backgroundColor:"#000000",}},
scales:{y:{min:0,
max:100,
title:{display:true,
text:"← →",
color:"blue",
rotate:"vertical",
font:{size:24}},
ticks:{stepSize:10}},
x:{title:{display:true,
text:"2020年 前期",
color:"green",
font:{size:24}}}}}
その1=document.getElementById("バー_その1");
バー_その1=new Chart(その1,{type:"line",
data:情報,
options:追加});
その2=document.getElementById("目印");
目印=new Chart(その2,{type:"bar",
data:情報,
options:追加})});
</script>

<h1 style="font-size:20px;">リンゴ / イチゴ / バナナ / ミカンの消費</h1>
<canvas id="目印"></canvas>

</html>