Zeichnung Wetterdaten Graph mit Javascript

Question

ich eine Übung an der Universität haben, wo gefragt wird, die Grafik mit openGraphics zu zeichnen, Leinwand ...

Ich habe fast erreicht die Ziellinie. Das einzige, was nicht richtig funktioniert, ist, dass die Rechtecke, die die Rolle der Spalten spielen, nach unten gehen, anstatt hinaufzugehen.

Es sieht wie folgt aus:

Aber sollte so aussehen:

Code:

var canvas; 
canvas = openGraphics(); 

canvas.setFont("TIMES", "13px", Font.BOLD); 
canvas.drawString("Weather Data: Bradford 2015", 5, 10); 
canvas.drawString("Sunshine (in hours)", 5, 30); 
canvas.setFont("TIMES", "12px", Font.PLAIN); 

var i = 0; 
var k = 0; 
var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
while(i < 12) { 
var hours = prompt("Type amount of sunshine hours for " + month[k]); 

canvas.setColor("pink"); 
canvas.fillRect(20+30*i, 280, 30, hours); 
canvas.setColor("black"); 
canvas.drawRect(20+30*i, 280, 30, hours); 


i += 1; 
k += 1; 

} 

canvas.setStroke("3"); 
canvas.drawLine(20, 60, 20, 280); 
canvas.drawLine(20, 280, 380, 280); 

canvas.setFont("TIMES", "13px", Font.BOLD); 
canvas.drawString("0", 5, 270); 
canvas.drawString("45", 5, 225); 
canvas.drawString("90", 5, 180); 
canvas.drawString("135", 0, 135); 
canvas.drawString("180", 0, 90); 
canvas.drawString("225", 0, 55); 
canvas.drawString("J", 35, 285); 
canvas.drawString("F", 65, 285); 
canvas.drawString("M", 95, 285); 
canvas.drawString("A", 125, 285); 
canvas.drawString("M", 155, 285); 
canvas.drawString("J", 185, 285); 
canvas.drawString("J", 215, 285); 
canvas.drawString("A", 245, 285); 
canvas.drawString("S", 275, 285); 
canvas.drawString("O", 305, 285); 
canvas.drawString("N", 335, 285); 
canvas.drawString("D", 365, 285); 


canvas.paint(); 

Answer 1

Rectangles werden von einem Punkt zu zeichnen beginnen darstellt ihre obere linke Ecke. Dieser Punkt ist die ersten beiden Argumente der canvas.fillRect.

So sehe ich: canvas.fillRect(20+30*i, 280, 30, hours);, wo Ihre Start-y-Koordinate ist die gleiche für jedes Rechteck (280). Das heißt, es wird hours Betrag von 280 gezeichnet. Also ja, das würde alle Rechtecke nach unten gehen lassen und umgekehrt aussehen, was Sie vorhaben.

Versuchen Sie im zweiten Argument von 280-hours zu starten.

Also: canvas.fillRect(20+30*i, 280-hours, 30, hours);