Question

我试图找出BitBucket使用什么图形库来创建提交图的可视化（左边的行），如果它是公开的。 enter image description here

如果BitBucket使用的库不可用于开源或商业，那么可以使用哪些替代的基于HTML 5的库来实现类似的效果？

这不适用于VCS系统，而适用于其他类型的项目

Answer 1

这是在提交图中绘制基元的代码：

线条：曲线变为柱状曲目
分支机构将一行拆分为2
点代表事件

演示：http://jsfiddle.net/m1erickson/cz37L/

enter image description here

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=2;

    var offsetX=20;
    var offsetY=10;
    var spacingX=12;
    var spacingY=25;
    var y=0;

    // lines 
    var lines=[];
    lines.push([0,0,0,0,1,1,2,2,2,2,2,2,2,2,2,2,3]);
    lines.push([1,1,1,1,2,2,3,3,3,3,3,3,3,3,3,3,4]);
    lines.push([2,2,2,2,3,3,4,4,4,4,4,4,4,4,4,4,5]);
    lines.push([3,3,3,3,4,4]);
    lines.push([4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5]);
    lines.push([5,5,5,5]);

    var branches=[];
    branches.push({line:2,x1:4,y1:5,x2:4,y2:4});
    branches.push({line:3,x1:5,y1:2,x2:4,y2:3});
    branches.push({line:4,x1:5,y1:6,x2:4,y2:5});
    branches.push({line:4,x1:5,y1:14,x2:4,y2:13});

    // dots
    var events1=[5,5,5,4,4,4,5,4,4,4,4,4,4,4,5,5];
    var events2=[5,5,5,3,3,2,4,2,2,2,2,2,2,2,4,2];

    var colors=["purple","olive","cyan","magenta","khaki","green"];

    drawAll();

    function drawAll(){
        for(var i=0;i<lines.length;i++){
            drawLine(lines[i],colors[i]);
        }

        for(var i=0;i<branches.length;i++){
            drawBranch(branches[i],colors[branches[i].line]);
        }

        for(var i=0;i<events1.length;i++){
            ctx.beginPath();
            ctx.arc(offsetX+events1[i]*spacingX,offsetY+i*spacingY,3,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle=colors[events2[i]];
            ctx.fill();
        }
    }

    function drawBranch(branch,linecolor){
        var x1=offsetX+branch.x1*spacingX;
        var x2=offsetX+branch.x2*spacingX;
        var y1=offsetY+branch.y1*spacingY;
        var y2=offsetY+branch.y2*spacingY;
        var cy=cy2=y1+(y2-y1)/2;
        ctx.beginPath();
        ctx.moveTo(offsetX+branch.x1*spacingX,offsetY+branch.y1*spacingY);
        ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
        ctx.strokeStyle=linecolor;
        ctx.stroke();
    }

    function drawLine(line,linecolor){
        var y=0;
        ctx.beginPath();
        ctx.moveTo(offsetX+line[0]*spacingX,offsetY+y*spacingY);
        for(var i=1;i<line.length;i++){
            if(line[i]==line[i-1]){
                ctx.lineTo(offsetX+line[i]*spacingX,offsetY+y*spacingY);
            }else{
                var x1=offsetX+line[i-1]*spacingX;
                var x2=offsetX+line[i]*spacingX;
                var y1=offsetY+(y-1)*spacingY;
                var y2=offsetY+y*spacingY;
                var cy=cy2=y1+(y2-y1)/2;
                ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
            }
            y++;
        }
        ctx.strokeStyle=linecolor;
        ctx.stroke();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=400></canvas>
</body>
</html>

Html图形渲染控件就像BitBucket一样

1 个答案: