Wie diese Art der „binären Matrix“ plotten Grafik (Ehrlich gesagt, ich weiß nicht, ob es einen Namen hat) mit PHP und HTML

Question

Ich versuche, diese Art von „binären Matrix“ plotten Grafik:

Die zwei Farben aus dem Beispielbild ignorieren; Ich möchte entweder einen Punkt blau für, sagen wir, "vollständige" Werte färben oder ihn ungefärbt/grau für "unvollständige" Werte belassen, um die tägliche Aufgabenvervollständigung für eine bestimmte Anzahl von Punkten/Tagen zu verfolgen. Die Punkte stellen einen Tag dar, an dem eine Aufgabe abgeschlossen oder nicht abgeschlossen wurde. Wenn Sie die gesamte Anzahl an Punkten/Tagen anzeigen, erhalten Sie eine Perspektive auf% der Fertigstellung, wenn die Tage vergehen.

Ich möchte eine Kombination aus HTML/Javascript und PHP + MySQL verwenden. Aber der schwierigste Teil für mich ist herauszufinden, einen guten Algorithmus, um diese Visualisierung zu machen. Danke für Ihre Hilfe.

Answer 1

Behandle einfach jeden Punkt wie ein Pixel. Stellen Sie sich auch vor, dass das Bild um 90 ° nach links gedreht wurde. Dann zeichnest du einfach ein Quadrat, das weniger Platz einnimmt, der ihm zugewiesen wird - so erhältst du die Trennlinien.

Hier ist schnell etwas zum Spielen. Einige Hinweise:

• 0) I Ihre Bildabmessungen nur halbiert
• 1) 4 und 5 Pixel Pixel wurden willkürlich
• 2) I nicht die Mühe mit der Einstellung der Farbe des Punkts gewählt - Sie können dies einfach tun .
• 3) Ich habe den Zeichenbereich einfach wie eine normale Bitmap behandelt, während Ihr Bild zu zeigen scheint, dass alle Y-Werte verwendet werden, bevor der nächste X-Wert benötigt wird. (Dies ist wie eine 90 ° CCW Rotation).
• 4) Ich adressiere die Pixel mit einem X und einem Y - vielleicht wären Sie eher daran interessiert, sie mit einer einzigen Zahl anzusprechen? Wenn ja, könnten Sie einfach eine Funktion schreiben, die zwei Coords zu einer einzigen Nummer zuordnen würde - der Pixel-Index, wenn Sie möchten.

Wenn ein Bild beispielsweise 100 x 100 Pixel groß ist, sind es 10.000 Pixel. Man könnte sie adressieren, indem eine Zahl von 0 Angabe - 9.999 Eg

function 10k_to_100x100(index) 
{ 
    var x = index % 100; 
    var y = (index/100).toFixed(0); 
    plotPixelDot(x, y); 
} 

X einfach der Rest ist, wenn durch die Breite Dividieren Y die ganze Zahl Antwort ist, wenn durch die Breite

Hier ist ein Ausschnitt Dividieren Sie können auf der Seite hier versuchen:

function byId(id){return document.getElementById(id);} 
 
window.addEventListener('load', onDocLoaded, false); 
 

 
function onDocLoaded() 
 
{ 
 
\t var x, y; 
 
\t 
 
\t for (y=0; y<20; y++) 
 
\t { 
 
\t \t for (x=0; x<100; x++) 
 
\t \t { 
 
\t \t \t drawDot(x, y, 'output'); 
 
\t \t } 
 
\t } 
 
} 
 

 
function drawDot(xPos, yPos, canvasId) 
 
{ 
 
\t var actualX=xPos*5, actualY=yPos*5; 
 
\t var ctx = byId(canvasId).getContext('2d'); 
 
\t ctx.fillRect(actualX, actualY, 4, 4); 
 
}

<canvas width=558 height=122 id='output'></canvas>