web-dev-qa-db-ja.com

chart.jsキャンバスがコンテナ要素のパディングを尊重しないのはなぜですか？

Chart.jsを単純な折れ線グラフで使用していますが、Chart.jsで計算される幅と高さのプロパティは、パディングを無視して親要素の幅と高さの合計に基づいているようです。

var options = {
    maintainAspectRatio: false,
    responsive: true
};

var data = {
    labels: ["", "", "", "", "", "", ""],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx1 = document.getElementById("mychart1").getContext("2d");
var myNewChart = new Chart(ctx1).Line(data, options);
.container {
    padding: 15px 15px 15px 15px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.child {
    display: inline-block;
    border: 1px solid red;
    width:100%;
    height:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>


<div class='container'>
    <canvas id='mychart1' class='child'></canvas>
</div>
<br>
<div class='container'>
    <div class='child'>test</div>
</div>

JSFiddle

2番目のコンテナと子は、私が期待している動作を示しています。これは、Chart.jsがキャンバスの幅と高さを計算する方法のバグですか、それともスタイリングの間違いですか？

javascripthtmlcsscanvaschart.js
27
Hawk

レスポンシブキャンバスも必要で、この問題がありました。これは私の修正でした：

<div>
    <canvas id="chart"></canvas>
</div>

Chart.jsは、パディングを無視して、キャンバスをコンテナの幅に合わせて拡大縮小するため、キャンバスをdivでラップしました。 divは、パディングを考慮して、パディングを使用してコンテナーに合わせてスケーリングし、レスポンシブChart.js canvasはdivに合わせてスケーリングします。

51
gwg

私もこの問題をグーグルで調べて、簡単な解決策を見つけました。

heightを追加して、それに応じて自動的に幅を調整し、より適切な方法で表示するようにしました。本当に必要な場合は、widthも追加できます。 canvas要素はHTML5の一部です。

pxを使用して値を入力することはできません。それを無視して、必要な数値を入力してください。

 <canvas id="myChart" height="80"></canvas>
4
Dulith De Costa

より良い解決策は、.container {box-sizing: border-box;}を使用することです

3
Angie

Jsfiddleの例で、responsive属性をfalseに変更します。

var options = {
    maintainAspectRatio: true,
    responsive: false
};

以前の設定では、Chrome devツールを使用して要素を検査するときに、高さと幅の両方にさらに30ピクセルが追加されました。キャンバスのサイズのため、キャンバス。

JSFIDDLEの例

2
Conrad Lotz

ラップしてから、このCSSを使用しました。

.chart-container {
  box-sizing:border-box;
  margin:2%;
  width:96%;
}

これにより、エッジからパッドが入り、反応しやすくなります。 2％を使用しましたが、レイアウトに合ったパーセンテージを使用できます。

0
Chris Smith