Javascript Diagramm füllt das gesamte Browserfenster

Question

Ich erstelle meine erste Grafik mit chart.js.

Das Diagramm wird angezeigt, wie ich es abgesehen von der Tatsache, dass es immer den gesamten Browser-Bildschirm füllt.

Ich habe versucht, die Abmessungen des Diagramms auf 100 zu setzen, aber es scheint nicht zu funktionieren.

Ich habe eine jsFiddle geschaffen, die meine Ausgabe präsentiert:

https://jsfiddle.net/1q5oej4q/

Auch hier ist der Code, wenn Sie wollen es sehen hier:

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

Wickeln Sie es in einer <div>, Größe dann das:

CSS:

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

HTML:

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

jsFiddle.

Answer 2

Sie müssen options ausfüllen und als Parameter an das Diagramm übergeben.

$(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 
     }); 
    } 
});