Entwickler-Ecke :: Thema anzeigen - Javascript macht nichts

GuaAck - So 28.01.18 00:41
Titel: Javascript macht nichts

Hallo,

ich möchte von einem Mikrocontroller aus per WLAN was auf dem Smart-Phone oder Tablet anzeigen. Mit Text und HTML läuft es perfekt.

Jetzt möchte ich zusätzlich ein Diagramm darstellen und habe dazu im Internet ein schönes, gut verständliches Beispiel gefunden. Das habe ich in meinen Code kopiert, läuft aber nicht.
Es soll ein Balkendiagramm mit Rasterlinien angezeigt werden. Sowohl auf meinen Windows-PC(Firefox) als auch von meinem Tablet (Android, Chrome) aus wird immer nur ein rotes Rechteck mit runden
Ecken angezeigt, was genau dem letzten HTML-Befehle entspricht. Warum tut das Script nichts?

Mein neues Tablet habe ich erst ein paar Tage und kaum was eingestellt, da ist üblericherweis alles aktiviert, was halbwegs sinnvoll ist. An meinem PC habe ich mir einfach mal die Zugangsseite meiner O2-Box angesehen, da geht es auch gleich in Javascript los. Auf beiden Geräten kann also Javascript nicht abgeschaltet sein.

Ich hatte auch vor "<script...." und nach "</script>" Text ausgeben lassen, geht wie erwartet. Es muss also was an dem Script falsch sein.

Hat jemand einen Tipp, wo ich suchen sollte?

Viele Grüße
Guaack

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:

<!DOCTYPE html>
<html>
<!--
https://webmaster-glossar.de/diagramme-mit-html5-canvas-zeichnen.html
Test fuer Graphic, 27.01.2018 
--> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Canvas Diagramm</title>
</head>
<body>
<script type="text / javascript">
var canvas = document.getElementById("canvas_diagramm");
var canvasWidth = 400;
var canvasHeight = 350;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
var cv = canvas.getContext("2d");
var graphGridSize = 20;
var graphGridX = (canvasWidth / graphGridSize).toFixed();
for (var i = 0; i < graphGridX; i ++) {
cv.moveTo(canvasWidth, graphGridSize * i);
cv.lineTo(0, graphGridSize * i);
}
cv.strokeStyle = "#dbdbdb";
cv.stroke();

//Data Graph
var data = { values:[
{A: "Jan", B: 32, C: "#E65858"},
{A: "Feb", B: 70, C: "#E65858"},
{A: "Mrz", B: 25, C: "#E65858"},
{A: "Apr", B: 20, C: "#E65858"},
{A: "Mai", B: 40, C: "#E65858"},
{A: "Jun", B: 60, C: "#E65858"},
{A: "Jul", B: 90, C: "#E65858"},
{A: "Aug", B: 75, C: "#E65858"},
{A: "Sep", B: 95, C: "#5692B8"},
{A: "Okt", B: 120, C: "#E65858"},
{A: "Nov", B: 160, C: "#EECD32"},
{A: "Dez", B: 100, C: "#E65858"},
]};

//Options Graph
var graphMax = 160;
var graphPadding = 10;
var graphFaktor = (canvasHeight-(2*graphPadding)) / graphMax;
var graphWidth = (canvasWidth-graphPadding) / data.values.length;
var graphTextcolor = '#000000';

//Draw Graph
for(var i = 0; i < data.values.length; i ++){
  tmpTop = (canvasHeight-(graphFaktor*data.values[i].B)).toFixed()-graphPadding;
  tmpHeight = ((data.values[i].B*graphFaktor)).toFixed();
  cv.fillStyle = data.values[i].C;
  cv.fillRect(graphWidth+((i-1)*graphWidth)+graphPadding, tmpTop, graphWidth-graphPadding, tmpHeight);
  cv.fillStyle = graphTextcolor;
  cv.fillText(data.values[i].A, graphWidth+((i-1)*graphWidth)+graphPadding+2, canvasHeight-2, graphWidth);
}
</script>
<canvas id="canvas_diagramm" style="border: 1px solid #E65858;border-radius:4px;">
</canvas>
</body>
</html>

Moderiert von Narses: Topic aus Alle Sprachen - Alle Plattformen verschoben am So 28.01.2018 um 01:54

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!