javascript - 自动调整图表大小 - AngularChartJS

Question

我正在制作堆积条形数据图表，以便使用 Chart.js 显示一些信息2.0.2 和 Angular-Chart 1.0.0 。

我想检测用户何时滚动到图表容器的末尾，然后通过保持图表的比率(高度/宽度)向图表添加一些数据。

问题是，chart.js 提供了一个 iframe，我不知道如何添加数据并保持栏之间的空间。如果我调整 Canvas 大小，这不起作用。我有一个 options.responsive = true 的基本图表，我将数据添加到该图表中。

但是，即使仅以编程方式更改图表包装宽度，图表的高度也会发生变化。这是一种奇怪的响应行为。

是否有另一种方法仅更改图表的宽度以保持条形图之间的间距相同？

Answer 1

这样做:

options: {
    responsive: true,
    maintainAspectRatio: false
};

然后您可以根据需要实际更新高度/宽度:

chart.canvas.parentNode.style.width = '128px';

//注意:我运行的是 2.6