幅と高さの設定

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

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

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

例を見る

チャートの幅/高さをどのように/どこで制御する必要がありますか？

This is some bogus text because SO prohibits linking to Codepen otherwise.

キャンバススタイルの幅を上書きできます！重要...

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

チャートをコンテナで囲むこともできます（公式ドキュメント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

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

私にも効く

responsive:true
maintainAspectRatio: false


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

ありがとうございました

相対的な親要素の使用について誰も話していなかったとは信じられません。

コード：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

出典：公式ドキュメント

上記ではありませんが、canvas要素を使用max-widthまたは使用することmax-heightも可能です。

以下は私のために働いた-しかしこれを「オプション」パラメータに入れることを忘れないでください。

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

これは私の場合に役立ちました：

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

aspectRatio必要に応じて変更できます。

options:{
     aspectRatio:4 //(width/height)
}

これを使用して、正常に動作します。

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

以下options、

responsive:true,