chart.jsのサイズを変更できません

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="/css/graph2.css"> 
    <title>Graph</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 

</head> 
<body> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</body> 
</html>

これは私が使用しているhtmlですが、私はChart.js 2.1.4を使用していますが、私は何をしてもサイズを縮小できません。chart.jsのサイズを変更できません

Javascriptを：

<script type="text/javascript"> 
var canvas = document.getElementById('updating-chart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
     labels: ["A", "B", "C", "D"], 
     datasets: [ 
      { 
      label: "Product A", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       data: [65, 59, 80, 81] 
      } 
     ] 
    }; 

var myLiveChart = new Chart(ctx,{ 
    type: 'bar', 
    data: startingData, 
    responsive: true, 
    maintainAspectRatio: true 
}); 
</script>

私はこれをどのように修正することができますか？私は常にcanvasのHTMLフィールドで何が変わっても画面全体を完全に網羅している、本当に大きなグラフを取得します。

ヘルプ？

出典

2017-04-25 sssszzzzzzssszzz

あなたは、少なくともキャンバスを含むものや、_/CSS/graph2.css_の内容が含まれるように、あなたの投稿を編集でしたそれに関連する？ –

コンテナにキャンバスを置き、CSSを使用して幅を設定すると、グラフのサイズが変更されます。

https://jsfiddle.net/ug5eczp2/1/

HTML：

<section> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</section>

CSS：

section { 
    width: 50%; 
}

出典

2017-04-25 03:34:28 Pango

キャンバスは、セクションコンテナに適合します。以下のコード。セクションの幅を必要な値に変更してください。

<section> 
    <canvas id="updating-chart" ></canvas> 
</section> 

section { 
width: 100%; 
} 
section > canvas { 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 
}

出典

2017-04-25 03:41:07 blecaf

あなたは幅の値を削除しようとすることができ、指定した高さの値は

<canvas id="updating-chart" height="200"></canvas>

出典

2017-04-25 03:44:47

chart.jsのサイズを変更できません

答えて

関連する問題