Javascript 我必须使用什么等式来生成具有线性斜率的漏斗图？

我正在尝试使用JavaScript和HTML5画布开发一个动态漏斗图。我画元素画得很好，唯一的问题是我的数学。我想让我的图形在每一边都有一个线性斜率，形成一个倒转的圆锥体。问题是，我不知道用我掌握的大量信息是否可以做到这一点。因此，以下是我所掌握的信息：

总图形的宽度和高度（分别为250x300）

整个图形的两个主基的长度（250和30）

总图形的面积（42000像素）（（250+30）/2）*300

将有多少个阶段（为了简单起见，假设为3个）

每个阶段将占用的面积百分比（假设每个阶段为30%、50%和20%）

图形的坡度/角度（上升/运行）300/110（它不是一个完美的三角形，第二个底边的长度为30）

每个阶段将是一个梯形（以及图形本身）。 现在，我可以使用什么公式来创建漏斗图，使每个舞台在给定坡度和舞台梯形的第一个底部时具有正确的高度

我试了又试，但我似乎无法让数学起作用。一个阶段对于坡度来说太长，或者另一个阶段太小，这会导致坡度不一致。我需要坡度保持一致，只改变舞台的高度

我能找到的最接近我想要的图像是：

---

梯形的面积是高度乘以顶部和底部的平均值。在您描述的情况下，顶部和底部始终与高度呈线性关系。设

h

为高度，

m

为坡度，

b

为底边。然后上边缘

t

等于

b+m*h

，因此面积为

1/2*h*（b+b+m*h）

，等于

h*b+1/2*m*h^2

。将其设置为你的面积，求解

h

的二次方程，就完成了。迭代相邻的梯形，因为较低梯形的顶部是较高梯形的底部。

我很欣赏eh9的答案，但老实说，我不够聪明，无法通过JavaScript解决这类方程。然而，我最终提出了一个解决方案，我将在这里概述

在你所处的任何舞台上找出基数1的长度。（如果是第一阶段，则是图表的宽度）

计算下一阶段需要的面积。我在传递一个百分比，因为我知道整个图形的总面积，我可以用这个面积乘以百分比，找到要绘制的舞台的面积

---

以“i”为高度，以“i”为条件迭代for循环，这个问题是否更适合mathoverflow？我不知道这是真实存在的。但现在已经解决了，所以现在不重要了。