如何使 ng-2 图表可滚动

Question

我正在使用 ng2-chart 显示大约 500 到 1000 个数据。问题是我需要修复图表的问题，有什么方法可以使 ng-2 图表可滚动吗？

我尝试将图表包裹在父级 div 内并将宽度设置为 100% 和 overflow-x: 滚动到图表 div，但它不起作用

Answer 1

您可以通过双重包装.

使 ng2-charts 的 <canvas baseChart> 元素可滚动

样本HTML：

<div class="myChartWrapper">
  <div class="myChart">
    <canvas baseChart 
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [plugins]="barChartPlugins"
      [legend]="barChartLegend"
      [chartType]="barChartType">
    </canvas>
  </div>

</div>

样本CSS:

.myChart{
  height: 500px;
  width: 1000px;
}

.myChartWrapper{
  width: 500px;
  overflow-x: scroll;
}

内层 <div class="myChart"> 定义了图表的实际宽度。外层包装 <div class="myChartWrapper"> 定义了您想要实际呈现给用户的包装宽度。

Stackblitz Example

希望对您有所帮助！

如何使 ng-2 图表可滚动

How to make ng-2 chart scrollable

ng2-charts

angular