网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
D3.js是一个JavaScript统计图库,用于使用D3.js库绘制基于SVG的可定制漏斗统计图。
从CDN加载必要的d3.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
在文档中加载D3 Funnel JS库。
<script src="path/to/d3-funnel.js"></script>
创建一个DIV元素作为漏斗图的容器。
<div id="funnel"></div>
将数据数组添加到漏斗图。
data = [
["Applicants", 12000],
["Pre-screened", 4000],
["Interviewed", 2500],
["Hired", 1500]
];
JavaScript在“渠道” DIV元素内绘制默认渠道图表。
var chart = new D3Funnel("#funnel");
chart.draw(data);
配置选项。
var options = {
chart: {
width: 350,
height: 400,
bottomWidth: 1 / 3,
bottomPinch: 0,
inverted: false,
horizontal: false,
animate: 0,
curve: {
enabled: false,
height: 20,
shade: -0.4,
},
totalCount: null,
},
block: {
dynamicHeight: false,
dynamicSlope: false,
barOverlay: false,
fill: {
scale: scaleOrdinal(schemeCategory10).domain(range(0, 10)),
type: 'solid',
},
minHeight: 0,
highlight: false,
},
label: {
enabled: true,
fontFamily: null,
fontSize: '14px',
fill: '#fff',
format: '{l}: {f}',
},
tooltip: {
enabled: false,
format: '{l}: {f}',
},
events: {
click: {
block: null,
},
},
};
chart.draw(data, options);
转载请注明来源:使用SVG和D3.js创建的漏斗统计图
本文永久链接地址:https://www.moyouyouw.cn/code/1376.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论