如何创建这样的水平漏斗？ [关闭]

Question

我希望市场上有一个水平漏斗插件。我不是一个优秀的 js 开发人员，但我是一名掌握 html/css 技能的设计师。我在 psd 中设计了类似下面的漏斗，但我找不到任何插件可以插入到 html 中。漏斗链接也应该动态调整。请建议我如何在漏斗列的第二行构建具有步骤标题、转化百分比的类似漏斗。我也在 css 中创建了这个，但 css 不起作用，因为漏斗列应该是完全动态的。

Answer 1

以下是使用 Canvas 为给定数据集绘制水平漏斗图的方法...

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var height=100;
var baseY=200;
var ascending=35;
var descending=35;
var barheight=50;
var data=[65,14,4,3,3];

filledLineChart(data,height,baseY,descending,ascending,barheight,'gold')

function filledLineChart(data,height,baseY,descending,ascending,barheight,fillcolor){
    var stepWidth=canvas.width/(data.length-1);
    var maxDataValue=0;
    for(var i=0;i<data.length;i++){
        if(data[i]>maxDataValue){maxDataValue=data[i];}
    }
    ctx.beginPath();
    ctx.moveTo(0,baseY-height*data[0]/maxDataValue);
    for(var i=1;i<data.length;i++){
        ctx.lineTo(stepWidth*i,baseY-height*data[i]/maxDataValue);
    }
    ctx.lineTo(stepWidth*(data.length-1),baseY);
    ctx.lineTo(0,baseY);
    ctx.fillStyle=fillcolor;
    ctx.fill();
    ctx.strokeStyle='lightgray';
    ctx.strokeRect(0,baseY-height-ascending,canvas.width,height+descending+ascending);
    ctx.strokeRect(0,baseY-height,canvas.width,height+descending);
    ctx.beginPath();
    for(var i=0;i<data.length;i++){
        ctx.moveTo(i*stepWidth,baseY-height);
        ctx.lineTo(i*stepWidth,baseY);
    }
    ctx.stroke();
    ctx.fillStyle='whitesmoke';
    ctx.fillRect(0,baseY-height-ascending-barheight,canvas.width,barheight);
}

<canvas id="canvas" width=300 height=300></canvas>

您可以像这样应用所有文本：

// set a font and set a font color and draw some text
ctx.font='14px verdana';
ctx.fillStyle='black';     // or red or whatever
ctx.fillText('21.5%', 100, 175)  // 100,175 are the x,y text position

我让您使用这种简单的文本方法为图表应用各种文本值。