Диаграмма 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 
     }); 
    } 
});