Charts.jsグラフがキャンバスサイズにスケーリングされない

Question

Charts.jsを使用してグラフを作成しようとしています（現在のグラフは、グラフは私が与えているキャンバスのサイズにスケーリングしていません。ここにすべての関連コードがあります。

それをインポートするには：その後、

 <div id="graph_2015" class ="stats_box"> 
      <h4>Graph 2015</h4> 
      Text 
      <canvas id="myChart" width="200" height="200"></canvas> 
     </div> 

そして：

<script type="text/javascript" src="js/stats_tab.js"></script> 

私は私のキャンバスを設定している。次に、以下のよう

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script> 

が、私はjavascriptのファイルに接続します最後にstats_tab.jsに次のコードがあります：

window.onload=function(){ 
    var ctx = document.getElementById("myChart").getContext("2d"); 
    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: [1,2,3,4,5,6,7,8,9,10], 
      datasets: [ 
       { 
        label: "My First dataset", 
        data: [1,2,3,2,1,2,3,4,5,4] 
       } 
      ] 
     }, 
     options: { 
     } 
    }); 
} 

グラフはうまく表示されますが、私が与えたキャンバスのサイズに合わせて縮尺することを拒否しています。関係するdivに関連するCSSもありません。 chromeのinspect機能は、最終的なグラフが、指定した200 x 200の代わりに676 x 676であることを知らせます。何が起こっているのか分かりません。

ありがとうございます！

Answer 1

Thisが有効です。

var ctx = document.getElementById("myChart").getContext("2d"); 
ctx.canvas.width = 200; 
ctx.canvas.height = 200; 
var myChart = new Chart(ctx,......... 

参考：基本的には、ちょうどあなたのJavaScriptに幅と高さのプロパティを追加Chart.js canvas resize

Answer 2

Chartjs'応答モードがfalseの場合は、キャンバスに設定された幅と高さプロパティにのみ機能（これはデフォルトではtrueです）。あなたのstats_tab.jsをこれに変更するとうまくいきます。

window.onload=function(){ 
     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: [1,2,3,4,5,6,7,8,9,10], 
       datasets: [ 
        { 
         label: "My First dataset", 
         data: [1,2,3,2,1,2,3,4,5,4] 
        } 
       ] 
      }, 
      options: { 
       responsive: false 
      } 
     }); 
    } 

Answer 3

重要な点は次のとおりwidthとheight特性はPXが、比の大きさではありません。

<canvas id="myChart" width="400" height="400"></canvas> 

この例では、1：1の比率です。あなたのhtmlのcontenairが676ピクセル幅の場合、あなたのチャートは676 * 675pxになります
これはいくつかの一般的な間違いを説明することができます。

この機能を無効にするには、maintainAspectRatioをfalseに設定します。