放大Chart.js的水平滚动

Question

我正在Angular 4中创建一个必须使用图表生成报告的应用程序，为此，我使用了Chart.js（ng2-charts）"ng2-charts": "1.6.0"

问题是： 此报告中的许多报告太长（超过10000行数据），我需要制作一个包含所有数据集的图表...因此该图表如下所示：

或类似这样（看红色方块）

因此，我决定进行某种“缩放”以通过滚动来水平扩展视图范围，但该图表仍然看起来不佳或无法理解

<button (click)="zoomChart('plus')" mat-icon-button>
  <mat-icon>zoom_in</mat-icon>
</button>
<button (click)="zoomChart('minus')" mat-icon-button>
  <mat-icon>zoom_out</mat-icon>
</button>
<div class="info-widget  border-right" fxFlex="{{ zoom + 'px' }}">
  <canvas height="60"  #plotChartReport id="plotChartCanvas{{ in }}" baseChart 
    [datasets]="plotingInfo[in].points"
    [labels]="plotingInfo[in].labels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType">
  </canvas>
</div>

zoomChart（）函数是这个

zoomChart(type: string) {
  if (type === 'plus') {
    if (this.zoom <= 50000) {
      this.zoom += 500;
    }
  } else {
    if (this.zoom > 500) {
      this.zoom -= 500;
    }
  }
}

但是它不起作用，只会消失图表。

我刚刚尝试过：我安装了chartjs-plugin-zoom库（https://github.com/chartjs/chartjs-plugin-zoom），它具有有趣的工具，但没有显示“滚动”功能我很容易在大图表中找到其他点。

所以我的问题是：

是否有任何方法可以控制画布的宽度以调整图表大小并使用按钮保持水平滚动？ 像这样：（从这个到这个）