Javascript 如何通过画布表示图表中的任何数字？

我想通过画布创建折线图，用于在vanilla JavaScript上表示数据。例如画布宽度600px，高度400px。我在Y轴上有最小和最大可能数以及它们之间的数。X轴表示日期

此图表的最大值为1000，最小值为0（以及它们之间的数字）。我可以用这些数字在画布上画像素点。但若在未来的数据中，最大值为75，最小值为10，我应该在可能的范围内，以像素为单位重新绘制图表上的点

问题是如何将0到1000、10到75、2k到8k等任意数字转换为像素，然后在画布上以600px和400px的比例绘制它们？还是800像素对600像素

---

举个简单的例子。我有600x400px的帆布。我有从0到1000的数字范围。1000等于400px，放在图表顶部。0是放置在图表底部的0像素。例如，768的像素值是多少？这里有什么公式？如何将任意大小的数字转换为像素

---

你能解释一下如何达到这个结果吗？可能对样本或公式进行编码，以在px中找到Y轴，公式应为：
待查找的px=（当前值*最大px）/最大值
例如：
X=（550*400）/1000=>
X=220000/1000=>220（即Y轴的px值）

X轴只是您设置的默认距离，至少我从您的问题中了解到了这一点。

const ctx=canvas.getContext（'2d'）；
常数填充=10；
常量设置={
x:{min:0，max:1000，步长：200}，
y:{min:0，max:10，步骤：2}，
宽度：600，
身高：400
};
课程表{
构造函数（画布、设置）{
canvas.width=settings.width；
canvas.height=settings.height；
//标签的偏移量
const offsetX=Math.ceil（Math.max(
ctx.measureText（settings.y.min.toString（））.width，
ctx.measureText（settings.y.max.toString（））.width
));
const offsetY=Math.ceil（ctx.measureText（“1”）.actualBoundingBoxAscent+ctx.measureText（“1”）.actualBoundingBoxDescent）；
//原点位置（像素）
常量originX=偏移量x+填充；
const originY=settings.height-padding-offsetY
//步长（像素）
const stepXPx=（settings.width-padding-originX）/（settings.x.max-settings.x.min）/settings.x.step；
const stepYPx=（originY-padding）/（（settings.y.max-settings.y.min）/settings.y.step）；
//轴
ctx.fillRect（originX，padding，1，originY-padding）；
ctx.fillRect（originX，originY，canvas.width-padding-originX，1）；
//点和标签X
为了(
设x=settings.x.min，步长=0；
简单的例子是x。我有画布600x400px。我有从0到1000的数字范围。1000等于400px。它放在图表的顶部。0是0像素放在图表的底部。例如768像素会是多少？这里有什么公式？如何将任何大小的数字转换为像素？@haacki47 x=（768*400）/1000，公式将是一个三的规则，X=（v*p）/m其中：v=转换为像素的当前值；p=以像素为单位的最大可能值；m=以像素为单位的最大可能值。我对填充有点困惑，但这里需要的所有公式都是