我需要使用哪个方程式才能生成一个具有线性斜率的漏斗图？

Question

我正在尝试使用JavaScript和HTML5画布开发动态漏斗图。我可以很好地绘制元素，唯一的问题是我的数学知识。我希望我的图形在两侧具有线性斜率，以形成倒置的锥体。问题是，我不知道是否可以通过我所拥有的信息完成。因此，这是我所拥有的信息：

1. 整个图表的宽度和高度（分别为250x300）
2. 整个图表的两个主要基底的长度（250和30）
3. 整个图表的面积（42000像素）((250 + 30)/2)*300
4. 将有多少阶段（假设只有3个）
5. 每个阶段所占面积的百分比（假设每个阶段分别为30％，50％和20％）
6. 图形的斜率/角度（上升/下降）300/110（它不是一个完美的三角形，第二个基数的长度为30）

每个阶段都将是一个梯形（以及图形本身）。现在，我可以使用什么公式来创建漏斗图，以确保每个阶段的高度正确，并考虑斜率和阶段梯形的第一个底部？

我已经尝试了很多次，但似乎无法使数学计算正确。一个阶段要么太长超出了斜率范围，要么太小导致斜率不一致。我需要保证斜率一致，并且只有阶段高度会改变。

我能找到的最接近代表我的想法的图像是这个：http://dwh01.unife.it/microstrategy/help/WebUser/WebHelp/Lang_1033/images/defining_funnel_widget.gif

- Rook777

---

这个问题是否更适合于MathOverflow？ - Jeff

说实话，我之前不知道这个存在。但现在问题已经解决了，所以现在也不重要了。 - Rook777

Answer 1

我很感激eh9的回答，但是说实话，我并不聪明到能够通过JavaScript解决那种方程。然而，最终我想出了一个解决方案，在这里进行概述。

1. 在任何阶段中，找出第一条基线的长度。（如果是第一阶段，则为图形的宽度）。 2. 计算下一个阶段需要的面积。我传递了一个百分比，因为我知道整个图形的总面积，所以可以将该面积乘以百分比并找到要绘制的阶段的面积。 3. 通过 for 循环迭代 'i' 作为高度，条件为 i ≤ graph_height。 1. 使用以下方程式通过给定的高度（i）和斜率计算第二条基线的长度：b2 = (b1 - ((i/slope)*2)))。 2. 计算给定高度的新临时阶段面积。 3. 将临时面积与应该有的面积之差以及高度（i）一起推入数组中。 4. 对数组进行排序，将最小的差异面积作为数组中的第一个元素。 5. 现在你有一个包含最小差异面积及其相应高度的数组，在其第一个元素中。

因此，现在您已经知道了舞台的面积和高度。只需加上第一条底边和斜率即可计算出第二条底边的长度和位置。

这不是最有效的解决方案（主要是由于所做的计算猜测），但是它确实有效且准确。

- Rook777

Answer 2

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

- eh9