如何使ng-2图表可滚动

Question

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

我尝试将图表包装在父div 中，并将宽度定为 100% 和溢出 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">定义要实际呈现给用户的包装器的宽度。

堆栈闪电战示例 🚀🚀

希望这有帮助！