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.
1
<div id="diagramm">
2
<canvas id="diagrammMessung"></canvas>
3
</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
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.
1
/* Ungetestet */
2
#diagramm {
3
font-size: 0;
4
padding: 0;
5
}
6
#diagrammMessung {
7
margin: 0;
8
width: 100%;
9
height: 100%;
10
}
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.
1
// ungetestet
2
function autoresize( id, resizeDetectionPolling ){
3
var canvas;
4
5
function redraw(){
6
yourChart.update();
7
}
8
9
function resizeCanvas(){
10
if(
11
canvas.width == canvas.offsetWidth
12
&& canvas.height == canvas.offsetHeight
13
) return;
14
canvas.width = canvas.offsetWidth;
15
canvas.height = canvas.offsetHeight;
16
redraw();
17
}
18
19
addEventListener("load",function(){
20
canvas = document.getElementById(id);
21
if(resizeDetectionPolling)
22
setInterval(resizeCanvas,250);
23
else
24
addEventListener("resize",resizeCanvas);
25
});
26
27
}
28
29
autoresize( "diagrammMessung", true ); // change the 2nd parameter to false if the canvas resizes only if the browser window resizes
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:
1
<div id="diagramm">
2
<canvas id="diagrammMessung">Your browser doesn't support canvas</canvas>
3
</div>
CSS:
1
#diagramm {
2
position: relative;
3
float: right;
4
width: 83.2%;
5
height: 61.34%;
6
}
7
8
#diagramm #diagrammMessung {
9
display: block;
10
width: 100%;
11
height: 100%;
12
}
JavaScript:
1
var lineChartData = {
2
labels : mylabels,
3
datasets : [
4
{
5
label: "Druckmessung",
6
fillColor : "rgba(151,187,205,0.2)",
7
strokeColor : "rgba(151,187,205,1)",
8
pointColor : "rgba(151,187,205,1)",
9
pointStrokeColor : "#fff",
10
pointHighlightFill : "#fff",
11
pointHighlightStroke : "rgba(151,187,205,1)",
12
data : myvalues
13
}
14
]
15
};
16
17
function drawDiagramm() {
18
"use strict";
19
var ctx = document.getElementById("diagrammMessung").getContext("2d");
20
window.myLine = new Chart(ctx).Line(lineChartData, {
21
responsive: true
22
});
23
}
24
25
function resizeCanvas() {
26
"use strict";
27
var canvas = document.getElementById('diagrammMessung'),
28
parent = document.getElementById('diagramm');
29
30
canvas.width = parent.offsetWidth;
31
canvas.height = parent.offsetHeight;
32
33
/**
34
* Your drawings need to be inside this function otherwise they will be reset when
35
* you resize the browser window and the canvas goes will be cleared.
36
*/
37
drawDiagramm();
38
//window.myLine.update();
39
}
40
41
// resize the canvas to fill browser window dynamically
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?
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... :-/
