如何使 ng2-charts 垂直条形图水平滚动？答案

【问题标题】：How can I make ng2-charts vertical bar-chart horizontally scroll-able?如何使 ng2-charts 垂直条形图水平滚动？
【发布时间】：2019-07-02 08:41:44
【问题描述】：

问题陈述： 我正在尝试制作ng2-charts 水平条形图scrollable，因为我将从不受限制的API 接收数据。 如果 x 轴上的数据值增长超过某些限制 x 轴上的标签开始重叠，我不想跳过任何标签，因此，我想将我的图表水平制作scrollable。

【问题讨论】：

获取父 div 并在该 div 内添加您的图表，使父 div 宽度：100%，图表溢出-x：自动；试试这个，我想这会对你有所帮助
@CryptexTechnologies 不，它无助于图表的画布元素显示响应行为。
你有没有找到合适的解决方案？我也面临同样的问题。

标签： html css angular typescript ng2-charts

【解决方案1】：

您可以使用内联样式。

<div style="overflow:scroll;">
<div class="chart-wrapper" style="height:300px">
<canvas baseChart width="3" height="1"
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors] = "[barChartColors]"
    [legend]="'true'"
    [chartType]="'bar'"></canvas>
</div>
</div>

【讨论】：