BitBucket과 같은 Html 그래픽 렌더링 컨트롤

커밋 그래프의 시각화를 만들기 위해 BitBucket이 사용하는 그래픽 라이브러리 (왼쪽의 선)가 공개되어 있는지 알아 내려고합니다. enter image description here BitBucket과 같은 Html 그래픽 렌더링 컨트롤

BitBucket에서 사용하는 라이브러리를 오픈 소스 또는 상용으로 사용할 수없는 경우 유사한 HTML5 기반 라이브러리를 사용하면 비슷한 효과를 얻을 수 있습니까?

이것은 VCS 시스템에 있지만 프로젝트의 다른 종류 아니다

출처

2014-04-08 Pop Catalin

여기에 커밋 그래프의 기본 요소 그리는 코드입니다 :

라인 : 원주 트랙에 그 곡선은
가지 :은 한 줄을 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>

출처

2014-04-09 05:01:23 markE

BitBucket과 같은 Html 그래픽 렌더링 컨트롤

답변

관련 문제