初めに
棒グラフも使用頻度は高いと思います。それゆえ、飽きがきます。インタラクティブ性とアニメーションを付けてみます。javascriptで作ります。
コード
chartjsを使います。以下のコードをコピーして、１つのhtmlファイルを作ります。htmlファイルをブラウザで開けばグラフが見えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#canvasdiv {
height: auto;
margin: 0px 50px;
}
</style>
</head>
<body>
<div id="canvasdiv">
<canvas id="myChart" width="200" height="110" style="align-content: center"></canvas>
</div>
<script>
Chart.defaults.font.size = 18;
var ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: [2000, 2010, 2020, 2030],
datasets: [{
data: [133, 500, 783, 1380],
label: "Food A",
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
}, {
data: [947, 1402, 1500, 1600],
label: "Food B",
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
}, {
data: [276, 408, 547, 675, 734],
label: "Food C",
borderColor: 'rgba(255, 206, 86, 1)',
backgroundColor: 'rgba(255, 206, 86, 0.2)',
}, {
data: [74, 167, 508, 784],
label: "Food D",
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'フードの売上 各社比較'
},
legend: {
labels: {
font: {
size: 14
}
}
},
},
scales: {
y: {
title: {
display: true,
text: '売上',
color: 'grey',
},
},
x: {
title: {
display: true,
text: '西暦',
color: 'grey',
},
}
},
elements: {
line: {
borderWidth: 2
}
},
animations: {
y: {
duration: 1000,
easing: 'linear',
loop: false
}
},
},
});
</script>
</body>
</html>