キャンバスチャートの高さは、これは、チャートのための私のHTMLコードの一部であり、私はAngularJS</p> <p>でチャートを描画したい

Question

AngularJS：

<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