the number of
dogs and cats

ワンちゃん
ねこちゃん

ペットフード協会さんが、犬猫の頭数の統計を発表されています。

https://petfood.or.jp/

今回は、思いっきりデータのプレゼンテーションにこだわってみたいと思います。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>
category