1. ホーム
  2. html

[解決済み] 幅と高さを設定する【終了

2022-09-29 13:50:33

質問

Chart.jsのサンプルコードで試しています。 ドキュメントに記載されている .

canvas要素に400px/400pxで幅と高さをインラインで指定します。

しかし、チャートをレンダリングすると、ページ幅いっぱいに拡大され、右端が切り取られてしまいます。

チャートの幅や高さをコントロールするにはどうしたらよいのでしょうか?

どのように解決するのですか?

キャンバススタイルのwidthをオーバーライドすることができます !important ...

canvas{

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

}

また

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

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

update under options を追加しました。 maintainAspectRatio: false,

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