Chart.js nicht reaktionsfähig

Question

Ich habe Probleme, das chart.js Liniendiagramm auf die Höhe sowie die Breite reagieren zu lassen.

Beispiel Sehen Sie, was sollte es so funktionieren: http://www.chartjs.org/samples/latest/charts/line/basic.html

Hier ist mein Code:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 
    var lineChartData = { 
    labels : ['January','February','March','April','May','June','July'], 
    datasets : [ 
     { 
     label: 'My First dataset', 
     labelColor : '#fff', 
     fontColor : '#fff' , 
     backgroundColor : 'rgba(220,220,220,0.2)', 
     borderColor : 'rgba(220,220,220,1)', 
     pointBackgroundColor : 'rgba(220,220,220,1)', 
     pointBorderColor : '#fff', 
     data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
     } 
    ] 
    } 

    var options = { 
    maintainAspectRatio: false, 
    legend: { 
     display: false, 
    }, 
    scales: { 
     xAxes: [{ 
     gridLines: { 
     display: false, 
     color: '#03A5C5', 
     lineWidth: 8, 
     }, 
     ticks: { 
      fontColor: "white", 
     }, 
     }], 
     yAxes: [{ 
     gridLines: { 
     display: false, 
     color: '#03A5C5', 
     lineWidth: 8, 
     }, 
     ticks: { 
      fontColor: "white", 
      beginAtZero: true, 
     } 
     }] 
    } 
    }; 
    var ctx = document.getElementById('canvas-1'); 
    var chart = new Chart(ctx, { 
    responsive: true, 
    type: 'line', 
    data: lineChartData, 
    options: options 
    }); 

Answer 1

Wie aus Docs für Chart.js es wird empfohlen, Leinwand in div-Container und Änderungsbreite zu wickeln/Höhe des Behälters. Aber im Grunde ändert es sich entweder durch gegebene Breite oder Höhe.

Gefunden eine flexiblere individuelle Lösung aus lannymcnie, die für jede Leinwand Reaktions verwendet werden können:

var stage = new createjs.Stage("canvas"); 
 

 
var c = new createjs.Shape(); 
 
c.graphics.f("#f00").dc(0,0,50); // Drawn a 100x100 circle from the center 
 

 
var t = new createjs.Text("Resize the browser/frame to redraw", "24px Arial bold", "#000"); 
 
t.x = t.y = 20; 
 
stage.addChild(c, t); 
 

 
window.addEventListener("resize", handleResize); 
 
function handleResize() { 
 
    var w = window.innerWidth-2; // -2 accounts for the border 
 
    var h = window.innerHeight-2; 
 
    stage.canvas.width = w; 
 
    stage.canvas.height = h; 
 
    // 
 
    var ratio = 100/100; // 100 is the width and height of the circle content. 
 
    var windowRatio = w/h; 
 
    var scale = w/100; 
 
    if (windowRatio > ratio) { 
 
     scale = h/100; 
 
    } 
 
    // Scale up to fit width or height 
 
    c.scaleX= c.scaleY = scale; 
 
    
 
    // Center the shape 
 
    c.x = w/2; 
 
    c.y = h/2; 
 
     
 
    stage.update(); 
 
} 
 
     
 
handleResize(); // First draw

html, body { 
 
    padding: 0; margin: 0; 
 
    overflow:hidden; 
 
} 
 
canvas { 
 
    border: 1px solid #f00; 
 
}

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script> 
 
<canvas id="canvas" width="800" height="600"></canvas>