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

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

Answer 1

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

Answer 2

我很欣赏eh9的答案，但老实说我不够聪明，不能通过JavaScript解决这个问题。但是，我最终提出了一个解决方案，我将在此概述。

1. 在您所在的任何舞台上找到基座1的长度。 （如果是第一阶段，那就是图表的宽度）。
2. 计算下一阶段需要的区域。我传递了一个百分比，因为我知道整个图形的总面积，我可以将该面积乘以百分比并找到要绘制的舞台区域。

3. 通过一个for循环迭代，其中'i'是高度，条件是i＆lt; = graph_height。

   1. 使用以下公式计算给定高度（i）和斜率的第二个基本长度：b2 =（b1 - （（i / slope）* 2）））。
   2. 计算给定高度的舞台的新临时区域。
   3. 将临时区域和区域的差异与高度（i）一起推入阵列。

4. 将放置差异最小区域差异的数组排序为数组中的第一个元素。

5. 现在你有一个数组，在它的第一个元素中包含与其相应高度的最小区域差异。

因此，现在你有了它的面积的阶段的高度。这就是您需要的第一个底座和斜坡，以确定第二个底座的长度和位置。

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