画布图表高度AngularJS

Question

我想在 AngularJS 中渲染一个图表

这是我的图表 html 代码的一部分：

<div style="overflow: auto;">
    <div id="parentDivChart" style="{{changeWidth()}}; height:350px;">
        <canvas id="bar"  class="chart chart-bar" chart-data="datta" chart-labels="labels" chart-legend="true">
        </canvas>
    </div>
</div>

这是我的函数 changeWidth() 的控制器：

function changeWidth(trendValues)
{
    elem = document.getElementById('parentDivChart');
    elem.style.width = $scope.Values.length*20 +"px";
}

我的想法是我希望能够根据收到的数据动态更改宽度。一切都很好，但是当我将我的高度固定为 350px 时，我的画布不会继承该值，而是会拉伸我的画布并为其高度设置一个不合适的值。有人可以帮我吗？为什么画布不继承父div的高度，却继承了变化的宽度。如何为画布设置固定高度？

提前致谢！

Answer 1

与elem.style.width = $scope.Values.length*20 +"px"; 一起使用elem.setAttribute('width', $scope.Values.length*20);。

这是因为画布元素取决于宽度属性而不是宽度style作为绘图区域的宽度。

Reference