Autor Beitrag
GuaAck
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 286
Erhaltene Danke: 25

Windows 8.1
Delphi 7 Pers.
BeitragVerfasst: So 28.01.18 00:41 
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

ausblenden volle Höhe 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 user profile iconNarses: Topic aus Alle Sprachen - Alle Plattformen verschoben am So 28.01.2018 um 01:54
Narses
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic star
Administrator
Beiträge: 9891
Erhaltene Danke: 1060

W2k .. W7pro .. W10ent
TP3 .. D7pro .. D10.1
BeitragVerfasst: So 28.01.18 02:52 
Moin!

Schalte mal im Firefox die Werkzeuge ein und geh auf die Konsole. Da siehst du relativ schnell, dass canvas nicht gefunden wird (=null), weil das Script ausgeführt wird, bevor du das Canvas-Element im DOM erzeugst. :idea:

Ich hab das mal so angepasst, dann läuft es:
ausblenden HTML-Dokument
1:
2:
3:
4:
5:
6:
...
<body>
<canvas id="canvas_diagramm" style="border: 1px solid #E65858;border-radius:4px;">
<script type="text/javascript">

var canvas = document.getElementById("canvas_diagramm");
...

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.
Gast
Gast
Erhaltene Danke: 1



BeitragVerfasst: So 28.01.18 10:35 
Hallo Narses,

Danke für den Tipp und vor Allem für den Hinweis zu der Konsole bei Firefox. Wirklich hilfreich!

Viele Grüße
GuaAck