이 기사에서는 html5 캔버스를 사용하여 원형 차트를 동적으로 그리는 샘플 코드를 소개하고 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.
먼저 렌더링을 살펴보겠습니다
이는 jquery와 같은 타사 라이브러리를 참조하지 않고 DOM 작업 및 캔버스 기능을 사용하여 작성되었습니다.
캔버스에 그린 원은 크게 속이 빈 원과 속이 빈 원으로 구분됩니다.
수요 분석에 따르면 원은 단단한 원이라는 것을 알 수 있습니다.
1. 먼저 캔버스를 사용하여 단단한 원을 그립니다.
//의사코드 var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(중심 x축 좌표, 중심 y축 좌표, 반경, 시작 각도, 끝 각도);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2. 다양한 색상을 바탕으로 원형 차트 그리기
//의사코드 var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(중심 x축 좌표, 중심 y축 좌표, 반경, 녹색 시작 코너, 녹색 끝 코너);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(원 중심 x축 좌표, 원 중심 y축 좌표, 반경, 빨간색 시작 각도, 빨간색 끝 각도) ;ctx.fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(중심 x축 좌표, 중심 y축 좌표, 반경, 노란색 시작 각도, 노란색 끝 각도);ctx .fillStyle = 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(원 중심 x축 좌표, 원 중심 y축 좌표, 반경, 보라색 시작 각도, 보라색 끝 각도) ;ctx.fillStyle = '보라색';ctx.closePath();ctx.fill();3. 원형 차트를 동적으로 그립니다.
동적 원 그리기 웹사이트에서는 일반적으로 requestAnimationFrame, setInterval(타이밍) 및 동적 각도 계산이라는 세 가지 방법을 권장합니다.
여기서는 첫 번째 requestAnimationFrame 메서드를 사용합니다.
작성 과정에서 원을 동적으로 그릴 때 원의 중심 좌표를 기준으로 그려지지 않는 문제를 발견했습니다. 이 문제를 해결하려면 원을 그릴 때마다 캔버스 브러시의 좌표를 원래 원 중심의 좌표로 다시 정의해야 합니다.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* border: 1px height: 100% width: 100%; 상자 크기: 테두리 상자;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,undefine){ var data = [ {제품: 제품 1, 매출: [192.44, 210.54, 220.84, 230.11,220.85,210.59,205.49,200.55,195.71 ,187.46 ,180.66 ,170.90]}, {제품:제품2,판매액:[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]}, {제품:제품 3,판매액:[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]}, {제품:제품 4,판매액:[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}] var dom_circle = document.getElementById('circle'); if(dom_circle != 정의되지 않음 && dom_circle != null) { var canvas = document.createElement(canvas) var ctx = canvas.getContext(' 2d'); var defaultStyle = function(Dom,canvas){ if(Dom.clientWidth <= 300) { canvas.width = 300; Dom.style.overflowX = auto; } else{ canvas.width = Dom.clientWidth } if(Dom.clientHeight <= 300) { canvas.height = 300; Dom.style.overflowY = 자동; } else { canvas.height = Dom.clientHeight } //좌표축 영역//실제 꺾은선형 차트 영역은 이 return { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0 , /보다 약간 작습니다. /캔버스 좌표축 왼쪽 좌표 y: 0, //캔버스 좌표축 위쪽 좌표 maxX: canvas.width, //캔버스 좌표축 오른쪽 좌표 maxY: canvas.height , //캔버스 위의 좌표축 하단 좌표 r:(canvas.width)/2, //시작점 ry:(canvas.height)/2, //시작점 cr: (canvas.width)/4, / /반경 startAngle :-(1/2*Math.PI), //시작 각도 endAngle:(-(1/2*Math.PI)+2*Math.PI), //끝 각도 xAngle:1*(Math .PI/180) //오프셋}; } //원 그리기 var tmpAngle = -(1/2*Math.PI); var ds = null; data[0]['sales'][0]+data[0 ] ['판매액'][1]+data[0]['판매액'][2]+data[0]['판매액'][3] var퍼센트1 = 데이터[0]['판매액'][0] / 합집합* 수학.PI * 2; var 백분율2 = 데이터[0]['판매액'][1]/sum * 수학.PI * 2 + 백분율1; var 백분율3 = 데이터[0]['판매액'][2]/sum * 수학.PI * 2 + 백분율2; var 백분율4 = 데이터[0]['sales'][3]/sum * 수학.PI * 2 + 백분율3; console.log(percent2); console.log(percent3); console.log(percent4); var tmpSum = 0; var drawCircle = function(){ if(tmpAngle >= ds.endAngle) { return false } else if(tmpAngle+ ds.xAngle > ds. endAngle) { tmpAngle = ds.endAngle } else{ tmpAngle += ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle) // console.log(tmpSum); y,canvas.width,canvas.height); if(tmpSum > 퍼센트1 && tmpSum <percent2) ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle); p2; } else if(tmpSum > 퍼센트2 && tmpSum <퍼센트3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle); p3; } else if(tmpSum > 퍼센트3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle) ctx.fillStyle = ds.p4; .beginPath();ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle) ctx.fillStyle = ds.p1; } ctx.closePath(); this.toDraw = function(){ ds= defaultStyle(dom_circle,canvas); // console.log(tmpAngle); // console.log(ds.xAngle) ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height) } this.toDraw(); self = this; window.onresize = function(){ self.toDraw() } }})(window);위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.