当我尝试在 Angular 6 中使用 billboard.js 图表库时遇到图表大小问题

Question

我正在尝试将 billboard.js 图表库与 Angular 6 结合使用，但面临图表大小的问题。 当页面第一次加载时，图表大小大于它的 div 容器，当我改变浏览器窗口大小时，图表的大小会根据 div 容器自动调整。

查看窗口调整大小前后的屏幕截图。

前

后

我曾尝试像这里提到的那样延迟加载图，但它不起作用。

任何帮助，将不胜感激。

Answer 1

导入AfterViewInit并将此方法添加到类中。 这行代码在图表呈现后调整图表的大小。

ngAfterViewInit() {
  this.charts[0].resize();    
}

您还可以为调整大小函数指定高度和宽度以将图表调整为特定大小。

resize({height: '200px', width: '400px'});