funnel-graph实现svg漏斗统计图表效果代码
代码语言:html
所属分类:图表
代码描述:funnel-graph实现svg漏斗统计图表效果代码
代码标签: funnel-graph 漏斗 统计 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { min-height: 100%; } body { margin: 0; background: #393862; } .funnel { margin: 24px auto; } .method-buttons { display: flex; justify-content: center; margin-top: 48px; } button { margin-left: 8px; margin-right: 8px; } h1 { margin: 150px auto; text-align: center; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/funnel-graph.main.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/funnel-graph.theme.min.css"> </head> <body> <div class="funnel"> </div> <div class="method-buttons"> <button id="makeVertical">Make Vertical</button> <button id="makeHorizontal">Make Horizontal</button> <button id="toggleDirection">Toggle Direction</button> <button id="gradientMakeVertical">Gradient Make Vertical</button> <button id="gradientMakeHorizontal">Gradient Make Horizontal</button> <button id="gradientToggleDirection">Gradient Toggle Direction</button> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/funnel-graph.min.js"></script> <script> var dataExample1 = { colors: ['#FFB178', '#FF3C8E'], values: [12000, 5700, 360] }; var dataExample2 = { labels: ['Impressions', '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0