chart.jsにて時間のグラフを描画したい

前提・実現したいこと

発生している問題・エラーメッセージ

detaの部分に時間("3:00")を使った値の場合に表示ができない状態でこまっております。

検索するとlabelに時間をいれたサイトは何件かヒットするのですが、
dataに時間をいれたサイトが発見できず、値の入力方法自体が分かりません。

該当のソースコード

var chartFunc2 = function() {
    var ctx = chartEl2.getContext('2d');
    chart = new Chart(ctx, {
        type : "horizontalBar", 
        data : {
            labels : [ "5/1", "5/2", "5/3", "5/4", "5/5", "5/6", "5/7", "5/8","5/9", "5/10", ],
            datasets : [
                    {
                        label : "学部学生",
                        borderWidth : 1,
                        backgroundColor : "#121554",
                        borderColor : "#121554",
                        data : [ "3:00", "2:00", "1:00", "2:00", "4:00","2:00", "0:00", "1:00", "2:00", "1:00", "3:00","3:00" ]
                    },
                    {
                        label : "大学院生",
                        borderWidth : 1,
                        backgroundColor : "#9b59b6",
                        borderColor : "#1d3681",
                        data : [ "3:00", "2:00", "1:00", "2:00", "4:00","2:00", "0:00", "1:00", "2:00", "1:00", "3:00","3:00" ]
                    },
                    {
                        label : "教員",
                        borderWidth : 1,
                        backgroundColor : "#2e70a7",
                        borderColor : "#2e70a7",
                        data : [ "3:00", "2:00", "1:00", "2:00", "4:00","2:00", "0:00", "1:00", "2:00", "1:00", "3:00","3:00" ]
                    },
                    {
                        label : "職員",
                        borderWidth : 1,
                        backgroundColor : "#4eadc7",
                        borderColor : "#4eadc7",
                        data : [ "3:00", "2:00", "1:00", "2:00", "4:00","2:00", "0:00", "1:00", "2:00", "1:00", "3:00","3:00" ]
                    },
                    {
                        label : "一般利用者",
                        borderWidth : 1,
                        backgroundColor : "#a7d8bf",
                        borderColor : "#a7d8bf",
                        data : [ "3:00", "2:00", "1:00", "2:00", "4:00","2:00", "0:00", "1:00", "2:00", "1:00", "3:00","3:00" ]
                    } ]
        },
      //グラフ設定
        options: {
            //凡例は非表示　false
            legend: {
                display: true
            },
            scales: {
                //X軸
                xAxes: [{
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '時間'
                    },
                    //ここで軸を時間を設定する
                    type: 'time',
                    time: {
                        parser: 'HH:mm',
                        unit: 'hour',
                        stepSize: 1,
                        displayFormats: {
                            'hour': 'HH:mm'
                        }
                    },
                    //X軸の範囲を指定
                    ticks: {
                        min: '0:00',
                        max: '10:00'
                    }
                }],
                //Y軸
                yAxes: [{
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '日付'
                    },

                }]
            }
        }

    });
};

試したこと

https://tr.you84815.space/chartjs/axis/cartesian/time.html#display-formats
・こちらの公式サイトを確認しながら値の入れ方を変えながら調整してみたのですが、
説明がざっくりしすぎていること、["3:00"]のような値の入れ方が記載なくわかりませんでした。
・数値であればグラフを表示出来ることを確認。
文字列にした途端表示できなくなる。
フォーマットが必要なような気がしておりますが、情報が少なく使い方が分からない状況です。

dataの部分でこのような文字列を扱うことは可能でしょうか？
可能であれば、時間表記したいのですが、不可能なら3:30 → 3.5のような値の入力にしなければいけないのかな？
とも考えております。

こちらの解決方法お分かりになられる方いらっしゃいましたら、ご教授願います。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/05/19 05:48

chartjs 時間軸とかで割とスバリの、日本語マニュアルっぽいのが出てきましたし、他にも結構出てきましたが、どう探しましたか？

ataru2222

2021/05/19 05:59

https://tr.you84815.space/chartjs/axis/cartesian/time.html#display-formats こちらのサイトを確認しながら、項目の値を変えてみたりしたのですが、そもそも説明がざっくりしすぎているのと、dataの部分に["3:00"]のような値の使い方の説明が書いていなくて分からずじまいでした。

m.ts10806

2021/05/19 06:23

文字直ではなくDateオブジェクトで使いましょうという方針と思います。

ataru2222

2021/05/19 07:24

入力の値と、表示する値を別々で作ると可能との解答を頂いたので今回はそちらでやってみます。解答していただき、ありがとうございました。