刻度/标签作为水平条形图上的日期

Question

我无法在开始时创建带有日期的x轴，因此我决定将其保留为数字（0 => 1月1日=> 2月...），因此我编写了此函数。但是我还需要在刻度/标签上加上几年，也可能是附加轴。我愿意接受任何想法。

此代码的结果：

 createChart(){

    this.HBarChart = new Chart('hbarChart', {    
        type: 'horizontalBar',
        data: {
            labels: [this.phasename] [0], //names of each phases
            datasets: [{
                label:'start',
                data: [this.month_start_new][0], // i keep months as numbers

                backgroundColor: "rgba(63,103,126,0)",
            },{

                data: [this.duration][0], //duration in terms of number of months
                label:'duration',
                backgroundColor:'blue',
            }
        ]

        },
        options: {

            scales: {
                xAxes:[{stacked:true,
                   ticks:{

                   stepSize:1,

                callback:function(value) {
                          //  return data.this.newdates_labels;
                           switch (value%12) {
                              case 0:


                                return 'Jan';
                              case 1:
                                return 'Feb';
                              case 2:
                                return 'March';
                              case 3:
                                return 'April';
                              case 4:
                                return 'May';
                              case 5:
                                return 'June';
                                case 6:
                                return 'July';
                              case 7:
                                return 'Aug';
                              case 8:
                                return 'Sep';
                              case 9:
                                return 'Oct';
                                case 10:
                                return 'Nov';
                              case 11:
                                return 'Dec';

                            }}}

                     }],
                yAxes: [{stacked:true

                }]
            }}

    });

 }