SVG可视化简易漏斗图

    xiaoxiao2021-03-25  45

    Visualization as a problem-solving and knowledge discovery tool has become even more important as we enter the Big Data era.

    效果图

    js代码

    jQuery

    /*------------------------------------------ 说明:漏斗图 - TEST 作者:taolinran 日期:2016-12 ---------------------------------------------*/ /* global app: true */ (function(root){ var app = (function() { var funnelDefaultColor = [ '#e15025', '#f18922', '#f7a83a', '#45bf7b', '#5f86d1', '#4774ca', '#3d5f9f' ]; return { /*------------------------------------------- Func: 生成漏斗图 params: [{}] memo: 还需要加一个是否支持SVG的判断 ---------------------------------------------*/ genFunelChart: function(data, height, w1, w2, funelColors) { var defaultColor = '#eee', defaultData = [ {percent: 0.143}, {percent: 0.143}, {percent: 0.143}, {percent: 0.143}, {percent: 0.143}, {percent: 0.143}, {percent: 0.143} ], funelOpacity = 0.2; height = (typeof height !== 'undefined') ? height : 280; w1 = (typeof w1 !== 'undefined') ? w1 : 300; w2 = (typeof w2 !== 'undefined') ? w2 : 60; funelColors = (typeof funelColors !== 'undefined') ? funelColors : funnelDefaultColor; var allWidth = w1; var funelSvg = ['<svg id="funel_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="' + allWidth + '" height="' + height + '" viewBox="0 0 ' + allWidth + ' ' + height + '">']; if (data[0]) { /* 边界处理之 全部为0 */ $.each(data, function(i, item){ if (item.percent > 0) { funelOpacity = 1; } }); if (funelOpacity !== 1) { data = defaultData; } var p0 = 0; $.each(data, function(i, item){ /* 正常漏斗组成 */ var p1 = item.percent, r0 = parseFloat((((w1 - w2) * p0) / 2).toFixed(3)), r1 = parseFloat((((w1 - w2) * p1) / 2).toFixed(3)), x1 = r0, y1 = parseFloat((height * p0).toFixed(3)), x2 = r0 + r1, y2 = parseFloat((height * (p0 + p1)).toFixed(3)), x3 = w1 - r0 - r1, y3 = y2, x4 = w1 - r0, y4 = y1; var colorNow = funelColors[i] || defaultColor, normalPath = '<path d="M' + x1 + ' ' + y1 + ' L' + x2 + ' ' + y2 + ' L' + x3 + ' ' + y3 + ' L' + x4 + ' ' + y4 + ' Z"' + ' fill="' + colorNow + '" stroke="none" style="opacity: ' + funelOpacity + '"></path>'; funelSvg.push(normalPath); p0 += p1; }); } funelSvg.push('</svg>'); return funelSvg.join(''); }, /*------------------------------------------- Func: 漏斗图svg ---------------------------------------------*/ drawFunnelBySvg: function(elementId, data) { /* 参数暂时略 */ var svgHtml = app.genFunelChart(data); $(elementId).html(svgHtml); }, }; })(); root.app = app; })(window); $(document).ready(function() { var demoData = [ {percent: 0.1}, {percent: 0.3}, {percent: 0.1}, {percent: 0.25}, {percent: 0.15}, {percent: 0.05}, {percent: 0.05} ]; app.drawFunnelBySvg('#svg_panel', demoData); });

    草图

    区块图(微调)

    转载请注明原文地址: https://ju.6miu.com/read-50416.html

    最新回复(0)