the number of
dogs and cats
ワンちゃん
ねこちゃん
ペットフード協会さんが、犬猫の頭数の統計を発表されています。
今回は、思いっきりデータのプレゼンテーションにこだわってみたいと思います。javascriptのchartjsを使ったデータ表現です。
以下が、chartjsによるグラフの描写のコア部分です。javascriptのjsonのデータ型は慣れないのですが、手打ちで入力するしかないのでしょうか。グラフライブラリごとに入力データの形が違って、悲しいです。
あと、携帯だとマウスホバーが効かなくてインタラクティブにならないところも悲しいです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js" integrity="sha512-VCHVc5miKoln972iJPvkQrUYYq7XpxXzvqNfiul1H4aZDwGBGC0lq373KNleaB2LpnC2a/iNfE5zoRYmB4TRDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="mychart-reverse"></canvas>
<script>
var ctx = document.getElementById('mychart-reverse');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
datasets: [{
label: 'Dog',
data: [10265000, 9713000, 9438000, 9356000, 8920000, 8903000, 8797000, 8489000],
borderColor: 'skyblue',
}, {
label: 'Cat',
data: [
9372000, 9492000, 9277000, 9309000, 9526000, 9649000, 9778000, 9644000
],
borderColor: 'pink',
}]
},
},
);
</script>