canvas Element dem parent div anpassen

[Kilian K. (kellermaaan)]

Schönen guten Tag,

momentan stelle ich auf meiner Webseite mit dem canvas Element ein 
Diagramm da. Dazu benutze ich ebenfalls noch die Charts.js library.

Wenn ich jetzt aber die Webseite von einem kleinen Bildschirm auf ein 
großen Bildschirm verschiebe, passt sich der Inhalt dem Bildschirm an, 
nur das Diagramm passt dann nicht mehr.

Ich möchte es gerne so haben, wenn ich die Seite verschiebe, dass sich 
die Größe von dem canvas Element sich der Größe von dem parent div 
anpasst.

<div id="diagramm">
            <canvas id="diagrammMessung"></canvas>
        </div>

Ich habe auch schon ein paar Sachen ausprobiert, die ich gefunden habe 
aber nichts hat funktioniert...

Ich hoffe hier ist jemand der mir helfen kann!

MfG Kilian

[Daniel A. (daniel-a)]

Kilian K. schrieb:
> Ich möchte es gerne so haben, wenn ich die Seite verschiebe, dass sich
> die Größe von dem canvas Element sich der Größe von dem parent div
> anpasst.

/* Ungetestet */
#diagramm {
  font-size: 0;
  padding: 0;
}
#diagrammMessung {
  margin: 0;
  width: 100%;
  height: 100%;
}

Das ist aber erst die halbe miete, da dass canvas nach der 
Grössenänderung neu gezeichnet werden muss. Dabei muss canvas.width und 
canvas.height neu gesetzt werden.

// ungetestet
function autoresize( id, resizeDetectionPolling ){
  var canvas;

  function redraw(){
    yourChart.update();
  }

  function resizeCanvas(){
    if(
        canvas.width  == canvas.offsetWidth
     && canvas.height == canvas.offsetHeight
    ) return;
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    redraw();
  }

  addEventListener("load",function(){
    canvas = document.getElementById(id);
    if(resizeDetectionPolling)
      setInterval(resizeCanvas,250);
    else
      addEventListener("resize",resizeCanvas);
  });

}

autoresize( "diagrammMessung", true ); // change the 2nd parameter to false if the canvas resizes only if the browser window resizes

[Kilian K. (kellermaaan)]

Erst einmal danke für deine Antwort. Ich habe es mal ausprobiert, aber 
es klappt leider nicht.

Ich habe auch mal selber bisschen rumprobiert aber bekomme es nicht 
hin...

Hier mal ein Teil von meinem Code:
HTML:

<div id="diagramm">
      <canvas id="diagrammMessung">Your browser doesn't support canvas</canvas>
</div>

CSS:

#diagramm {
  position: relative;
    float: right;
    width: 83.2%;
    height: 61.34%;
}

#diagramm #diagrammMessung {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript:

var lineChartData = {
    labels : mylabels,
    datasets : [
        {
            label: "Druckmessung",
            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 : myvalues
        }
    ]
};

function drawDiagramm() {
  "use strict";
    var ctx = document.getElementById("diagrammMessung").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

function resizeCanvas() {
  "use strict";
  var canvas = document.getElementById('diagrammMessung'),
    parent = document.getElementById('diagramm');
  
  canvas.width = parent.offsetWidth;
  canvas.height = parent.offsetHeight;
  
  /**
   * Your drawings need to be inside this function otherwise they will be reset when 
   * you resize the browser window and the canvas goes will be cleared.
   */
  drawDiagramm();
  //window.myLine.update();
}

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

Ich habe auch mal zwei Bilder angehangen, wie das z.B. auf einem kleinen 
Bildschirm aussieht und das gleiche nochmal auf einem großen Bildschirm.

[Noch einer (Gast)]

Der erste Eindruck... Woher weiß die Chart Klasse, dass sie X und Y 
unterschiedlich skalieren soll und dabei nur den Bereich über der Maske 
verwenden darf?

[Kilian K. (kellermaaan)]

Noch einer schrieb:
> Der erste Eindruck... Woher weiß die Chart Klasse, dass sie X und Y
> unterschiedlich skalieren soll und dabei nur den Bereich über der Maske
> verwenden darf?

Da hast du recht! Aber da ich bis jetzt noch nicht wirklich was in 
JavaScript gemacht habe, wüsste ich jetzt auch nicht, wie ich das machen 
soll... :-/

[Kilian K. (kellermaaan)]

Habe es jetzt doch hinbekommen!

Code:

function resizeCanvas() {
  "use strict";
  
  window.myLine.destroy();
  var canvas = document.getElementById('diagrammMessung'),
    parent = document.getElementById('diagramm');
  
  canvas.width = parent.offsetWidth;
  canvas.height = parent.offsetHeight;
  
  /**
   * Your drawings need to be inside this function otherwise they will be reset when 
   * you resize the browser window and the canvas goes will be cleared.
   */
  getMeasureVal();
}

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

Musste bei dieser Funktion nur zwei Zeilen ändern.
1. Durch

window.myLine.destroy();

 wird einmal die ganze Instanz von dem Diagramm gelöscht und
2. mit

getMeasureVal();

 hole ich mir die aktuellen Daten und erzeuge damit ein neues Diagramm.

Dies wird immer ausgeführt wenn sich die Größe des Fensters verändert!