3

JavaScriptとHTML5キャンバスを使用して動的ファネルグラフを開発しようとしています。私は要素をうまく描くことができます、私が持っている唯一の問題は私の数学にあります。逆さまの円錐を作成するために、グラフの両側に線形の勾配を付けたいと思います。問題は、私が持っている情報の量でそれができるかどうかわからないということです。だから、ここに私が持っている情報があります：

  1. グラフ全体の幅と高さ（それぞれ250x300）
  2. グラフ全体の2つの主要なベースの長さ（250と30）
  3. グラフ全体の面積（42000ピクセル）（（250 + 30）/ 2）* 300
  4. ステージの数（簡単にするために3としましょう）
  5. 各ステージが占める面積のパーセンテージ（たとえば、各ステージで30％、50％、および20％）
  6. グラフの傾き/角度（立ち上がり/実行）300/110（完全な三角形ではなく、2塁の長さは30です）

各ステージは台形（およびグラフ自体）になります。さて、ステージの台形の傾斜と一塁を考慮して、各ステージを正しい高さにするファンネルグラフを作成するためにどの式を使用できますか？

私は試してみましたが、数学をうまく機能させることができないようです。1つのステージが勾配に対して長すぎるか、別のステージが小さすぎるため、勾配が不整合になります。スロープが一定で、ステージの高さだけが変わる必要があります。

私が欲しいものを表すために私が見つけることができる最も近い画像はこれです：

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

4

2 に答える 2

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 に答える
0

私はeh9の答えに感謝しましたが、正直なところ、JavaScriptを使用してその種の方程式を解くほど賢くはありません。しかし、私はここで概説する解決策を思いついたのです。

  1. どのステージにいても、ベース1の長さを見つけます。（それが最初の段階である場合、それはグラフの幅です）。
  2. 次の段階が必要な面積を計算します。パーセントを渡しており、グラフ全体の総面積がわかっているので、その面積にパーセントを掛けて、描画するステージの面積を見つけることができます。

  3. 'i'が高さで、条件がi<=graph_heightであるforループを繰り返します。

    1. 次の式を使用して、指定された高さ（i）と勾配で2塁の長さを計算します。b2=（b1-（（i /勾配）* 2）））。
    2. その高さを指定して、ステージの新しい一時領域を計算します。
    3. 一時的な領域の差と領域の大きさを高さ（i）とともに配列にプッシュします。

  4. 最小の差分領域の差を配列の最初の要素として配置して、配列を並べ替えます。

  5. これで、最初の要素に、対応する高さとの最小の面積差を含む配列ができました。

したがって、これで、ステージの面積に応じた高さが得られます。これは、一塁と二塁の長さと位置を把握するための勾配とともに必要なすべてです。

これは最も効率的な解決策ではありませんが（主に行われる計算による推測作業のため）、機能し、正確です。

于 2012-11-22T01:30:38.627 に答える