如何在Ionic中为chart.js启用水平滚动

Question

我正在使用离子应用程序中的Chart.js版本2.7.2来显示条形图。

但是，当有更多数据时，我无法使图表沿x轴滚动。无论我添加多少数据都适合屏幕宽度。我想保持每个条的宽度，一次只显示5条，如果超过5条，则使图表可滚动。

这就是我所拥有的：

这就是我需要的：

。

您可以看到是否有5个以上的数据，它最多只能在屏幕上显示5条，其余的应该可以沿x轴滚动。

我在下面发布代码的相关部分：

HTML：

<ion-content scroll="false" text-center>
  <ion-grid>
   <ion-row class="graph-section">

    <canvas height="250%" #barCanvas></canvas>

   </ion-row>
</ion-grid>

CSS：

.graph-section{
        display:block;
       height: 100%;
      width: 100%;
      }

      ion-grid {
        height: 100%;
      }

.ts文件：

barChart: any;

 ionViewDidLoad() 
    {

        this.barChart = new Chart(this.barCanvas.nativeElement, 
            {

                chart:{'xAxisName' : "Quarter"},
            type: 'bar',
            data: {
                labels: ["5d", "2d", "1d ", "2h", "5min"],
                datasets: [{
                    label: '',
                    data: [1, 2, 1, 2, 3],
                    backgroundColor: [
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',

                    ],
                    borderColor: [
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',

                    ],
                    borderWidth: 1
                }]
            },
            options:  {
                scales: {
                    yAxes: [{ 
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }

        });

  }