如何在Chartjs的特定区域缩放和平移？

Question

是否可以通过chartjs-plugin-zoom缩放特定区域？

chartjs-plugin-zoom可以在图表的所有区域中通过鼠标进行缩放和平移。 例如JSFiddle。

但是，我只想在某些区域实现交互。

具体地说，我只想在Y轴上放大/缩小垂直方向，或者在X轴上用鼠标滚轮放大/缩小水平方向，或者通过在X轴上拖动来执行PAN。

换句话说，我只想在轴标签上实现交互。

这可能吗？

示例

var leftEnd;
var rightEnd;

var ctxA = document.getElementById("myChartA").getContext("2d");

let data_A1 = [{
    x: "2019-01-01 00:01:38",
    y: "13.0"
  },
  {
    x: "2019-01-01 01:01:39",
    y: "11.0"
  },
  {
    x: "2019-01-01 02:01:40",
    y: "16.0"
  },
  {
    x: "2019-01-01 03:01:41",
    y: "15.0"
  },
  {
    x: "2019-01-01 04:01:42",
    y: "14.0"
  },
  {
    x: "2019-01-01 05:01:38",
    y: "12.0"
  },
  {
    x: "2019-01-01 06:01:39",
    y: "11.0"
  },
  {
    x: "2019-01-01 07:01:40",
    y: "13.0"
  },
  {
    x: "2019-01-01 08:01:41",
    y: "14.0"
  },
  {
    x: "2019-01-01 09:01:42",
    y: "16.0"
  }
];

var myChartA = new Chart(ctxA, {
  type: 'line',
  data: {
    datasets: [{
      label: '1st Data',
      data: data_A1,
      borderColor: '#0f0',
      showLine: true
    }]
  },
  options: {
    animation: false,
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          displayFormat: 'h:mm',
        },
        min: leftEnd,
        max: rightEnd
      }]
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x',
          onPan: function() {
            console.log("PAN");
            leftEnd = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
            rightEnd = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;

            //updateChart();
          }
        },
        zoom: {
          enabled: true,
          mode: 'xy',
          onZoom: function() {
            console.log("zoom");
            leftEnd = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
            rightEnd = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;

            //updateChart();
          }
        }
      }
    },
    responsive: true,
    legend: {
      display: false
    }
  }
});

.chart {
  display: float;
  width: 100%;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<div class="chart" style="width:100%">
  <canvas id="myChartA" class="myChart"></canvas>
</div>