如何使用 PHP 和 HTML 绘制这种类型的 "binary matrix" 图形（老实说我不知道它是否有名字）
How to plot this type of "binary matrix" graphic (I honestly don't know if it has a name) using PHP and HTML
我正在尝试绘制这种类型的 "binary matrix" 图形：
忽略示例图像中的两种颜色；我想为 "complete" 值涂上蓝色的点，或者为 "incomplete" 值留下 uncolored/gray 作为跟踪每日任务完成情况的一种方式 [=24] =].点代表任务完成或未完成的一天。显示 dots/days 的全部数量可以了解随着时间推移完成的百分比。
我想使用 HTML/Javascript 和 PHP + MySQL 的组合。但对我来说最困难的部分是找出一个好的算法来渲染这个可视化。感谢您的帮助。
就像对待像素一样对待每个点。另外，假设图像已逆时针旋转 90°。然后，您只需绘制一个占用分配给它的空间较少的正方形 - 这样，您就可以得到分隔线。
这里有一些可以玩的东西。
一些注意事项：
- 0) 我刚把你的图片尺寸减半
- 1) 4像素和5像素任意选择
- 2) 我没有设置圆点的颜色 - 你可以
轻松做到这一点。
- 3) 我只是将绘图区域视为普通的上下区域
位图，而您的图像似乎显示所有 Y 值都将
在需要下一个 X 值之前使用。 （这就像 90° CCW
旋转）。
- 4) 我正在用 X 和 Y 对像素进行寻址 - 也许你会
更有兴趣用一个数字来称呼他们？如果是这样，你
可以轻松编写一个函数，将两个坐标映射到一个坐标
number - 像素索引，如果你愿意的话。
也就是说，如果图像是 100 x 100，则有 10,000 个像素。您可以通过指定 0 - 9,999 之间的数字来解决这些问题
例如
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()
{
var x, y;
for (y=0; y<20; y++)
{
for (x=0; x<100; x++)
{
drawDot(x, y, 'output');
}
}
}
function drawDot(xPos, yPos, canvasId)
{
var actualX=xPos*5, actualY=yPos*5;
var ctx = byId(canvasId).getContext('2d');
ctx.fillRect(actualX, actualY, 4, 4);
}
<canvas width=558 height=122 id='output'></canvas>
我正在尝试绘制这种类型的 "binary matrix" 图形：
忽略示例图像中的两种颜色；我想为 "complete" 值涂上蓝色的点，或者为 "incomplete" 值留下 uncolored/gray 作为跟踪每日任务完成情况的一种方式 [=24] =].点代表任务完成或未完成的一天。显示 dots/days 的全部数量可以了解随着时间推移完成的百分比。
我想使用 HTML/Javascript 和 PHP + MySQL 的组合。但对我来说最困难的部分是找出一个好的算法来渲染这个可视化。感谢您的帮助。
就像对待像素一样对待每个点。另外，假设图像已逆时针旋转 90°。然后，您只需绘制一个占用分配给它的空间较少的正方形 - 这样，您就可以得到分隔线。
这里有一些可以玩的东西。 一些注意事项：
- 0) 我刚把你的图片尺寸减半
- 1) 4像素和5像素任意选择
- 2) 我没有设置圆点的颜色 - 你可以 轻松做到这一点。
- 3) 我只是将绘图区域视为普通的上下区域 位图，而您的图像似乎显示所有 Y 值都将 在需要下一个 X 值之前使用。 （这就像 90° CCW 旋转）。
- 4) 我正在用 X 和 Y 对像素进行寻址 - 也许你会 更有兴趣用一个数字来称呼他们？如果是这样，你 可以轻松编写一个函数，将两个坐标映射到一个坐标 number - 像素索引，如果你愿意的话。
也就是说，如果图像是 100 x 100，则有 10,000 个像素。您可以通过指定 0 - 9,999 之间的数字来解决这些问题 例如
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()
{
var x, y;
for (y=0; y<20; y++)
{
for (x=0; x<100; x++)
{
drawDot(x, y, 'output');
}
}
}
function drawDot(xPos, yPos, canvasId)
{
var actualX=xPos*5, actualY=yPos*5;
var ctx = byId(canvasId).getContext('2d');
ctx.fillRect(actualX, actualY, 4, 4);
}
<canvas width=558 height=122 id='output'></canvas>