README

使用d3.js实现的漏斗图实现

用法

首先，您必须实例化一个FunnelChart。您可以传递给FunnelChart的选项如下（唯一必需的选项是data）

data = 包含类别和参与度的数组，按从最大预期漏斗参与度到最小的顺序排列。

width & height = 图表宽度和高度（默认为400和600）

bottomPct = 漏斗梯形底部的宽度百分比。顶部总是占用整个宽度，但底部底部的宽度百分比可以更改。（默认 = 1/3）

要实际绘制FunnelChart，请调用FunnelChart的draw方法。draw方法接受一个选择器，该选择器对应于FunnelChart应绘制的元素，以及一个速度（默认 = 2.5）。请确保您已经有一个与您使用的选择器对应的元素，因为d3-funnel-charts不会创建元素；它只是使用您HTML中已经存在的元素作为容器。

示例

<div id="funnelContainer"></div>
<script src="d3.min.js"></script> // Make sure to include d3.js first
<script src="d3-funnel-charts.min.js"></script>
<script type="text/javascript">
    var data = [['Video Views', 1500], ['Comments', 300], ['Video Responses', 150]];
	var chart = new FunnelChart({
					data: data,
					width: 650, 
					height: 450, 
					bottomPct: 1/4
				});
	chart.draw('#funnelContainer', 2);
</script>

上述示例的演示可以在这里找到这里

许可

MIT

intelogie / d3-funnel-charts

维护者

详细信息

README

用法

许可