css - 在角度应用程序中调整图表高度时，Css 样式效果不佳

Question

这是我的笨蛋。我已将 json 对象传递给图表，我想将width 100%折线图和高度设置为 100px，但是当我们最小化高度时，css 无法正常工作。该图表不采用其父 div/面板的高度和宽度。

Answer 1

使用 customCSS指定尺寸：

CSS：

.panel{width:100%;height:300px;}
.panel-body{width:100%;height:270px;}
.chart-container{height:100%!important;}
canvas{width:100%;height:100%!important;}

演示： http ://plnkr.co/edit/gVRwrEKWA9HaTCWgbyIS?p=preview

调整窗口大小时，画布和图形将获得新维度作为内联样式，它会覆盖样式表中的 css 规则。为了防止这种覆盖，使用!important

Answer 2

最后，我必须通过在 chart.js 中再添加一个全局变量并从我们定义图表的控制器分配其值来设法调整图表大小。在 chart.js 中，我们可以将新高度指定为：

 canvas.height = this.chart.height = Chart.defaults.global.defaultHeight; // newHeight;

在我们的控制器中，我们可以将其更改/更新为：

 Chart.defaults.global.defaultHeight = 250;

我不知道任何其他方式会更好，任何其他建议将不胜感激。