Chart.js将画布尺寸设置为0x0，并且不显示任何内容

Question

我从官方文档中获得了第一个char.js示例，并尝试使用angular实现它。没有错误，图表对象已正常创建，但未显示任何内容。当我在devtools中检查DOM时，我看到chart.js将画布的宽度/高度设置为0。我做错了什么？

代码：https://stackblitz.com/edit/angular-chartjs-ex

Answer 1

该图表不可见，因为组件宿主是inline元素。因此，它不应包含由div库创建的Chart.js包装程序之类的块元素。

将主机的display样式属性设置为block或inline-block将使图表可见：

:host {
  display: inline-block;
}

有关演示，请参见this stackblitz。