画布图表高度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); 。

这是因为canvas元素取决于width 属性 ，而不取决于绘图区域宽度的width 样式 。

参考