3

我正在尝试使用 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

4

2 回答 2

0

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

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

  3. 迭代一个 for 循环，其中 'i' 是高度，条件是 i <= graph_height。

    1. 使用以下等式计算具有给定高度 (i) 和斜率的第二个基本长度：b2 = (b1 - ((i/slope)*2)))。
    2. 在给定高度的情况下计算舞台的新临时区域。
    3. 将临时区域的差异与该区域的差异与高度（i）一起推入一个数组中。

  4. 对数组进行排序，将最小差异区域差异作为数组中的第一个元素。

  5. 您现在有一个数组，它的第一个元素包含与其相应高度的最小面积差。

因此，现在您有了给定面积的舞台高度。这就是你所需要的连同第一个基地和坡度来计算第二个基地的长度和位置。

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

于 2012-11-22T01:30:38.627 回答
0

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

于 2012-11-20T04:17:32.410 回答