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元素取决于宽度属性而不是宽度样式作为绘图区域的宽度。

<强> Reference

画布图表高度AngularJS

1 个答案: