允许在chart.js折线图中放大和缩小x轴和y轴上的时间刻度

Question

我正在使用带有线型图的chart.js。我在x轴和y轴上使用了不同格式的时间刻度。我想用滚动放大和缩小x轴和y轴但不能这样做。缩放在轴上的数字刻度上工作但不在时间刻度上。请帮忙。请参考示例 Example

javscript文件

var ctx = document.getElementById("myChart").getContext('2d');

var episodicImage = new Image();
    episodicImage.src ='https://image.ibb.co/gLLZ8a/episodic.png';
function newDateString(days) {

            return moment().add(days, 'd').format();
        }
var ManualImage = new Image();
    ManualImage.src ='https://image.ibb.co/fr2p8a/user_successful.png';
var EpisodicfailImage = new Image();
    EpisodicfailImage.src ='https://image.ibb.co/eMGfya/episodic_failed.png';

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
       /*  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange","Pink"], */
        datasets: [{

           fill: false,

        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        showLine: false,
          pointRadius : 20,

           pointStyle: [episodicImage, ManualImage, EpisodicfailImage, ManualImage, episodicImage,ManualImage,ManualImage,ManualImage], 
            data: [
              {x: "2015-01-20T17:07:24+07:30", y: "00:30",name:"Title1"},
              {x: "2015-07-01T17:05:24+05:30", y:"12:00",name:"Title2"},
              {x: "2015-12-30T17:05:24+05:30", y:"07:00",name:"Title3"},
            {x: "2016-05-13T17:05:24+05:30", y:"01:00",name:"Title4"},
            {x: "2016-11-13T17:05:24+05:30", y:"03:00",name:"Title5"},
            {x: "2017-01-10T17:05:24+05:30", y:"23:45",name:"Title6"},
            {x: "2017-09-13T17:05:24+05:30", y:"17:00",name:"Title7"},
             {x: "2015-12-30T17:05:24+05:30", y:"07:15",name:"Title8"},],
            backgroundColor: "#FC940B",
        }]
    },
    options: {
      legend: {
        display: false
    },
        scales: {
           xAxes: [{
                        type: "time",
                        ticks: {
                              minRotation:30,
                              maxTicksLimit: 20// angle in degrees
                              },

                              display: true,
                              scaleLabel: {
                                          display: true,
                                          labelString: 'Date'
                                           }
                    }],
            yAxes: [{
               type: "time",
                display: true,
               beginAtZero: true,
                 time: {
                        format: "HH:mm",
                        unit: 'hour',
                        displayFormats: {
                                        'hour': 'HH:mm', 
                                       }
                        }
            }]
        },
    tooltipTemplate: "<%= name %>",
       zoom: {
            enabled: true,
            mode: 'y',
            limits: {
                   max: 10,
                    min: 0.5
                     }
              }
    },

});


Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(10,160,10,0.8)";
document.getElementById("myChart").onclick = function(evt){
            var activePoints = myChart.getElementsAtEvent(evt);
            var firstPoint = activePoints[0];
            var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
            alert("Time "+value.y + " Date " + value.x);
            console.log(value.x);
        };