jquery - 販売パイプライン チャート

Question

d3 を使用して販売パイプライン チャートを作成しようとしています。以下は例です。私が始めることができるサンプルコードを知っている人はいますか?

どんな助けにも感謝します。

Answer 1

別のアプローチとして、完全に CSS を使用した例を次に示します。

<div id='chart'>
  <div id='plotA'>&nbsp;</div>
  <div id='plotB'>&nbsp;</div>
  <div id='plotC'>&nbsp;</div>
  <div id='plotD'>&nbsp;</div>
  <div id='plotE'>&nbsp;</div>
</div>

#chart {
  text-align: center;
}
#chart div {
  margin-top: 2px;
}
#plotA {
  border-top: 5px solid #3B5592;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  height: 0; width: 200px;
}
#plotB {
  border-top: 100px solid #BF2E2B;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0; width: 100px;
}
#plotC {
  margin-left: 50px;
  border-top: 50px solid #8CB638;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0; width: 50px;
}
#plotD {
  margin-left: 74px;
  border-top: 23px solid #684A94;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  height: 0; width: 18px;
}
#plotE {
  margin-left: 90px;
  border-top: 15px solid #24A4C7;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  height: 0; width: 4px;
}

デモ付き

Answer 2

Anna Powell-Smithによるfunnel- plots と呼ばれる github のプロジェクトがあり、有利なスタートを切ることができます。これをレンダリングするには、事前にいくつかの定義を確立する必要があります。このグラフはちょっと無意味だと感じる人もいます(私はたまたまもっと良いグラフがあると感じています)、しかしそれらは人々が見ることを期待しているものです。最初に、ステップの高さが均一で幅が可変かどうか (つまり、各ステップで、プロットされた値が減少するのと同じパーセントで幅が減少するかどうか)、またはプロットされた値によって最小値と最大値が決定されるかどうかを決定する必要があります。ただし、その間のステップの高さは、質問で参照されているチャートのアプローチであるプロットされた値を表すように調整されます (各ステップのボリュームを使用)。