JavaScriptのグラフがブラウザウィンドウ全体をいっぱいにします

Question

私はchart.jsを使って最初のグラフを作成しています。

グラフは、ブラウザの画面全体が常に満たされていることを除いて、私が望むように表示されます。

グラフの寸法を100に設定しようとしましたが、動作しないようです。

私は私の問題を紹介することjsFiddleを作成している：あなたがたいが、ここでそれを表示する場合

https://jsfiddle.net/1q5oej4q/

はまた、ここでのコードは次のとおりです。

Javascriptを：

$(function() { 
    displayLineChart(); 

    function displayLineChart() { 
     var data = { 
      labels: ['first', 2, 3, 4, 5, 6, 7, 8, 9, 10], 
      datasets: [{ 
       label: "Prime and Fibonacci", 
       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: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, { 
       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: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] 
      }] 
     }; 

     var chart = document.getElementById("lineChart"); 
     chart.width = 100; 
     chart.height = 100; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     ctx.canvas.width = 100; 
     ctx.canvas.height = 100; 
     var options = {}; 
     var lineChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
     }); 
    } 
}); 

HTML：

<canvas id="lineChart"> 
</canvas> 

Answer 1

<div>で包み、その後、そのサイズ：

CSS：

#wrapper { 
    width: 400px; 
    height: 500px; 
} 

HTML：

<div id="wrapper"> 
    <canvas id="lineChart"> 
    </canvas> 
</div> 

jsFiddleを。

Answer 2

optionsを入力して、それをグラフのパラメータとして渡す必要があります。

$(function() { 
    displayLineChart(); 

    function displayLineChart() { 
     var data = { 
      labels: ['first', 2, 3, 4, 5, 6, 7, 8, 9, 10], 
      datasets: [{ 
       label: "Prime and Fibonacci", 
       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: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, { 
       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: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] 
      }] 
     }; 

     var chart = document.getElementById("lineChart"); 
     chart.width = 500; 
     chart.height = 500; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     ctx.canvas.width = 500; 
     ctx.canvas.height = 500; 
     var options = { 
      responsive: false, 
      maintainAspectRatio: true 
     }; 
     var lineChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
      options: options 
     }); 
    } 
});