javascript - 我必须使用什么方程来生成具有线性斜率的漏斗图？

Question

我正在尝试使用 JavaScript 和 HTML5 Canvas 开发动态漏斗图。我可以很好地绘制元素，唯一的问题是我的数学。我希望我的图形在每一侧都有一个线性斜率，以形成一个倒置的圆锥体。问题是我不知道是否可以用我拥有的信息量来完成。所以，这是我掌握的信息:

1. 总图的宽度和高度(分别为250x300)
2. 整个图的两个主要碱基的长度(250和30)
3. 总图的面积(42000像素)((250+30)/2)*300
4. 将有多少个阶段(为简单起见，假设为 3)
5. 每个阶段将占用的区域百分比(假设每个阶段分别为 30%、50% 和 20%)
6. 图形的斜率/Angular (rise/run)300/110(这不是一个完美的三 Angular 形，第二个底边的长度是30)

每个阶段都是一个梯形(以及图形本身)。现在，我可以使用什么公式来创建一个漏斗图，使每个阶段在给定斜率和阶段梯形的第一个底边的情况下具有正确的高度？

我已经试了又试了，但我似乎无法使数学工作。要么一个阶段的斜率太长，要么另一个太小，导致斜率不一致。我需要坡度保持一致，并且只需要改变舞台的高度。

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

http://dwh01.unife.it/microstrategy/help/WebUser/WebHelp/Lang_1033/images/defining_funnel_widget.gif

Answer 1

梯形的面积是高度乘以顶部和底部的平均值。在您描述的情况下，顶部和底部始终与高度呈线性关系。设 h 为高度，m 为坡度，b 为底边。那么顶边t等于b + m * h，所以面积是1/2 * h * (b + b + m * h )，等于 h * b + 1/2 * m * h^2。将其设置为等于您的面积，求解 h 的二次方程，您就完成了。迭代相邻的梯形，因为较低梯形的顶部是较高梯形的底部。