web-dev-qa-db-ja.com

幅と高さの設定

Chart.jsのサンプルコードを試しています ドキュメントで指定 。

幅と高さは、400px/400pxのキャンバス要素でインラインで指定されます。

ただし、グラフをレンダリングするときは、ページ幅いっぱいに拡大され、右端が切り取られます。

例を参照

チャートの幅/高さをどのように/どこで制御するのですか？

This is some bogus text because SO prohibits linking to Codepen otherwise.
chart.js
48
Fellow Stranger

キャンバススタイルの幅！important ...をオーバーライドできます。

canvas{

  width:1000px !important;
  height:600px !important;

}

また

オプションでresponsive:true,プロパティを指定します。

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

追加されたオプションの下で更新：maintainAspectRatio: false,

リンク： http://codepen.io/theConstructor/pen/KMpqvo

61
KpTheConstructor

チャートをコンテナで囲むこともできます（公式ドキュメント http://www.chartjs.org/docs/latest/general/responsive.html#important-note による）

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

およびオプション付き

responsive:true
maintainAspectRatio: false
25
Nicolas

私の場合、オプションの下にresponsive: falseを渡すと問題が解決しました。特にtrueがデフォルトなので、誰もが反対のことをするように言っている理由はわかりません。

10
Antimony

私のために働く

responsive:true
maintainAspectRatio: false

ありがとうございました

3
sumit

私にも使える

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

ありがとうございました

1
subramanya4

上記では言及していませんが、キャンバス要素でmax-widthまたはmax-heightを使用することも可能です。

0
Ukuser32