Как построить этот тип «бинарной матрицы» графический (честно, я не знаю, если у него есть имя) с помощью PHP и HTML

Question

Я пытаюсь построить этот тип «бинарной матрицы» графический:

Не учитывайте два цвета изображения образца; Я хочу либо окрасить точку синего цвета, скажем, «полные» значения, либо оставить его неокрашенным/серым для «неполных» значений как способ отслеживать ежедневное выполнение задачи за определенное количество точек/дней. Точки представляют собой день, когда задача была завершена или не завершена. Отображение полного количества точек/дней дает представление о% от завершения по прошествии дней.

Я хотел бы использовать комбинацию HTML/Javascript и PHP + MySQL. Но самая сложная часть для меня - это хороший алгоритм для визуализации этой визуализации. Спасибо за вашу помощь.

Answer 1

Просто обрабатывайте каждую точку, как пиксель. Также представьте, что изображение повернуто на 90 ° CCW. Затем вы просто рисуете квадрат, который занимает меньше места, которое ему выделяется - таким образом вы получаете разделительные линии.

Здесь вы можете быстро поиграть. Несколько замечаний:

• 0) Я только наполовину ваши размеры изображения
• 1) 4 пикселей и 5 пикселей были выбраны произвольно
• 2) Я не заморачиваться с установкой цвета точки - вы можете легко сделайте это.
• 3) Я просто обработал область рисования, как обычное верхнее нижнее растровое изображение, в то время как ваше изображение, похоже, показывает, что все значения Y будут использоваться до следующего значения X. (Это похоже на поворот на 90 ° CCW ).
• 4) Я обращаюсь к пикселям с X и Y - возможно, вы были бы больше заинтересованы в обращении к ним с помощью одного номера? Если это так, вы можете легко написать функцию, которая будет отображать два коордата на одно число - индекс пикселей, если хотите.

I.e, если изображение 100 x 100, есть 10 000 пикселей. Вы можете обратиться к ним, указав число от 0 - 9999 Например

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

X просто остаток при делении на ширине Y является весь номер ответа, при делении на ширине

Вот фрагмент вы можете попробовать прямо здесь, на странице:

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>