8

Chart.jsを使用してチャートを行に配置しようとしていspan6ます。Chart.js はandプロパティを使用し<canvas>、必要とします。を必要なものに設定し、を100% に設定しましたが、 に設定されている div を埋めるために引き伸ばされません。heightwidthheightwidthspan6

何か案は？

<div class="row" style="padding-top: 20px;">
  <div class="span6">
    <div id="daily">
      <canvas id="daily-chart" width="100%" height="400px"></canvas>
    </div>
  </div>
</div>
4

2 に答える 2

16

私はあなたの問題を解決することができました！

このjsFiddleを確認してください。

パネルのサイズを変更して、動作を確認してください。

基本的に、ウィンドウのサイズ変更に応答する関数を呼び出します。

$(window).resize(respondCanvas);

カプセル化されている親要素の幅と高さのフェッチをトリガーし、チャートを再描画します。

function respondCanvas() {
    c.attr('width', jQuery("#daily").width());
    c.attr('height', jQuery("#daily").height());
    //Call a function to redraw other content (texts, images etc)
    myNewChart = new Chart(ct).Bar(data, options);
}

独自の ID、クラス、幅、高さなど、すべての小さな部分を調整できます。

于 2013-07-19T10:02:25.450 に答える
0

グラフのすべてのオプションを追加する JavaScript ファイルで

new Chart(ctx).Line(data, options );

//Boolean - If we want to override with a hard coded scale
    scaleOverride : true,
于 2013-07-19T07:59:14.687 に答える