responsive = false funktioniert nicht

Question

Ich versuche, ein paar Diagramme anzuzeigen, habe aber zwei Hauptfunktionen, mit denen ich helfen könnte. Die erste, responsive = false scheint nicht zu funktionieren, denn wenn ich das Diagramm lade, werden die Diagramme größer, und das zweite ist, dass meine Hover-Tool-Tipps nicht zu funktionieren scheinen.

Hier ist, was meine Grafik Code wie folgt aussieht:

var ctx = document.getElementById("myChart").getContext("2d"); //this.$refs.canvas 

var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: ["Checked", "Un-Checked"], 
     datasets: [{ 
     label: '# of Hits', 
     data: [1000, 500], 
     backgroundColor: [ 
      'rgba(54, 162, 235, 0.2)', 
      'rgba(255, 206, 86, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(54, 162, 235, 1)', 
      'rgba(255, 206, 86, 1)' 
     ], 
     borderWidth: 1 
     }] 
    }, 
    options: { 

     responsive: false 

    } 
}); 

Answer 1

Geben myChart eine feste Breite, wie:

<div id="myChart" style="width:200px;"></div> 

Es funktioniert für mich.

Answer 2

Das Erkennen, wann sich die Leinwandgröße ändert, kann nicht direkt vom CANVAS-Element aus vorgenommen werden. Chart.js verwendet seinen übergeordneten Container zum Aktualisieren der Canvas-Render- und Anzeigegrößen. Bei dieser Methode muss der Container jedoch relativ positioniert und nur dem Diagrammbereich zugewiesen werden. Ansprechbarkeit kann dann durch Einstellen relative Werte für die Behältergröße

Quelle erreicht werden: http://www.chartjs.org/docs/latest/general/responsive.html