HTML5 캔버스를 사용하여 다단계 원형 차트를 그리는 방법은 무엇입니까?

아닐 사말

요소에 pie-chart모양 을 만들려고하는데이 작업을 canvas자체적으로 수행하는 기능을 찾을 수 없습니다.
할 수있는 쉬운 방법이 있습니까?pie chart like below image

이 파이는 각 조각의 진행 상황을 나타냅니다.?

상표

다음은 호출 가능한 함수를 사용하여 호를 그리는 시작 예제입니다.

시작 및 끝 호 각도는 Radians입니다. 다음과 같이 각도를 라디안으로 변환 할 수 있습니다.radians = degrees * Math.PI/180

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.lineWidth = 2;
ctx.font = '14px verdana';

var PI2 = Math.PI * 2;
var myColor = ["Green", "Red", "Blue"];
var myData = [30, 15, 38, 22, 30, 20, 10];
var cx = 150;
var cy = 150;
var radius = 100;

ctx.globalAlpha=0.50;
pieChart(myData, myColor);
ctx.globalAlpha=1.00;

function pieChart(data, colors){
  // calc data total
  var total = 0;
  for (var i = 0; i < data.length; i++) {
    total += data[i];
  }
  // calc sweep angles for each piece of pie
  var sweeps = []
  for (var i = 0; i < data.length; i++) {
    sweeps.push(data[i] / total * PI2);
  }
  // draw outer pie
  var accumAngle = 0;
  for (var i = 0; i < sweeps.length; i++) {
    var f=randomColor();
    drawWedge(radius, accumAngle, accumAngle + sweeps[i], f, data[i]);
    accumAngle += sweeps[i];
  }
  // draw inner percent-complete wedges
  var accumAngle = 0;
  for (var i = 0; i < sweeps.length; i++) {
    var r=radius*(Math.random()*70+20)/100;
    var f=randomColor();
    drawWedge(r,accumAngle, accumAngle + sweeps[i], f, data[i]);
    accumAngle += sweeps[i];
  }  
}

function drawWedge(radius, startAngle, endAngle, fill, label) {
  // draw the wedge
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.arc(cx, cy, radius, startAngle, endAngle, false);
  ctx.closePath();
  ctx.fillStyle = fill;
  ctx.strokeStyle = 'white';
  ctx.fill();
  ctx.stroke();
}

function randomColor(){ 
    return('#'+(Math.floor(Math.random() * 0x1000000) + 0x1000000).toString(16).substr(1));
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=512 height=512></canvas>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

클래스를 사용하여 tkinter 캔버스에 다각형을 그리는 방법은 무엇입니까?

분류에서Dev

HTML5 캔버스를 사용하여 원의 어느 부분을 클릭했는지 확인하는 방법은 무엇입니까?

분류에서Dev

HTML5 캔버스를 사용하여 오프셋으로 최종 점 좌표를 계산하는 방법은 무엇입니까?

분류에서Dev

캔버스 HTML5에서 ontouch 이벤트를 사용하는 방법은 무엇입니까?

분류에서Dev

amcharts를 사용하여 다중 링 도넛 원형 차트를 만드는 방법은 무엇입니까?

분류에서Dev

dc.js : 다른 입력 임계 값을 사용하여 원형 차트의 데이터 분포를 변경하는 방법은 무엇입니까?

분류에서Dev

R을 사용하여 많은 행 (또는 차원)이있는 방사형 차트를 그리는 방법은 무엇입니까?

분류에서Dev

Base64 String 형식으로 JSON에서 전달 된 HTML5 캔버스에 이미지를 표시하는 방법은 무엇입니까?

분류에서Dev

html의 캔버스 태그를 단어 파일로 변환하는 방법은 무엇입니까?

분류에서Dev

캔버스에서 사각형의 음수 그리기를 중지하는 방법은 무엇입니까?

분류에서Dev

형식이 다를 때 R을 사용하여 밀리 초 단위로 시간 차이를 계산하는 방법은 무엇입니까?

분류에서Dev

여러 HTML5 캔버스 개체를 차례로 애니메이션하는 방법은 무엇입니까?

분류에서Dev

drawImage ()를 사용하여 캔버스에 그림을 그리는 방법은 무엇입니까?

분류에서Dev

itext pdf를 사용하여 PDF 캔버스에 경로를 그리는 방법은 무엇입니까?

분류에서Dev

D3.js에서 마우스 오버시 원형 차트의 다른 세그먼트를 변경하는 방법은 무엇입니까?

분류에서Dev

html5 캔버스를 배경으로 사용하여 CSS를 사용하여 YouTube 삽입을 그 위에 배치하여 해상도에 독립적이되도록하는 방법은 무엇입니까?

분류에서Dev

HTML5 / Javascript를 사용하여 텍스트 파일을 다운로드하고 표시하는 방법은 무엇입니까?

분류에서Dev

Fabricjs를 사용하여 타원을 그리는 방법은 무엇입니까?

분류에서Dev

HTML / JS 캔버스 도넛 차트 ovlerap으로 원형 획을 만드는 방법은 무엇입니까?

분류에서Dev

SharedPreference를 사용하여 캔버스에 문자열을 그리는 방법은 무엇입니까?

분류에서Dev

CSS를 사용하여 HTML5 캔버스에 색상을 지정하는 방법이 있습니까?

분류에서Dev

OpenCV를 사용하여 다각형을 그리는 방법은 무엇입니까?

분류에서Dev

다른 검색의 개수를 하나의 (원형) 차트로 누적하는 방법은 무엇입니까?

분류에서Dev

테두리가있는 상자에 HTML5 캔버스를 만드는 방법은 무엇입니까?

분류에서Dev

HTML5 비디오 태그를 원 모양으로 표시하는 방법은 무엇입니까?

분류에서Dev

vba를 사용하여 많은 변형이있는 차원 값의 형식을 올바르게 다시 지정하는 방법은 무엇입니까?

분류에서Dev

HTML5 캔버스 컨텍스트를 기본값으로 재설정하는 방법은 무엇입니까?

분류에서Dev

Plotly : 여러 꺾은 선형 차트를 단일 그림으로 출력하는 방법은 무엇입니까?

분류에서Dev

HTML5 캔버스에서 클릭 한 그리드 정사각형 요소를 찾는 방법

Related 관련 기사

  1. 1

    클래스를 사용하여 tkinter 캔버스에 다각형을 그리는 방법은 무엇입니까?

  2. 2

    HTML5 캔버스를 사용하여 원의 어느 부분을 클릭했는지 확인하는 방법은 무엇입니까?

  3. 3

    HTML5 캔버스를 사용하여 오프셋으로 최종 점 좌표를 계산하는 방법은 무엇입니까?

  4. 4

    캔버스 HTML5에서 ontouch 이벤트를 사용하는 방법은 무엇입니까?

  5. 5

    amcharts를 사용하여 다중 링 도넛 원형 차트를 만드는 방법은 무엇입니까?

  6. 6

    dc.js : 다른 입력 임계 값을 사용하여 원형 차트의 데이터 분포를 변경하는 방법은 무엇입니까?

  7. 7

    R을 사용하여 많은 행 (또는 차원)이있는 방사형 차트를 그리는 방법은 무엇입니까?

  8. 8

    Base64 String 형식으로 JSON에서 전달 된 HTML5 캔버스에 이미지를 표시하는 방법은 무엇입니까?

  9. 9

    html의 캔버스 태그를 단어 파일로 변환하는 방법은 무엇입니까?

  10. 10

    캔버스에서 사각형의 음수 그리기를 중지하는 방법은 무엇입니까?

  11. 11

    형식이 다를 때 R을 사용하여 밀리 초 단위로 시간 차이를 계산하는 방법은 무엇입니까?

  12. 12

    여러 HTML5 캔버스 개체를 차례로 애니메이션하는 방법은 무엇입니까?

  13. 13

    drawImage ()를 사용하여 캔버스에 그림을 그리는 방법은 무엇입니까?

  14. 14

    itext pdf를 사용하여 PDF 캔버스에 경로를 그리는 방법은 무엇입니까?

  15. 15

    D3.js에서 마우스 오버시 원형 차트의 다른 세그먼트를 변경하는 방법은 무엇입니까?

  16. 16

    html5 캔버스를 배경으로 사용하여 CSS를 사용하여 YouTube 삽입을 그 위에 배치하여 해상도에 독립적이되도록하는 방법은 무엇입니까?

  17. 17

    HTML5 / Javascript를 사용하여 텍스트 파일을 다운로드하고 표시하는 방법은 무엇입니까?

  18. 18

    Fabricjs를 사용하여 타원을 그리는 방법은 무엇입니까?

  19. 19

    HTML / JS 캔버스 도넛 차트 ovlerap으로 원형 획을 만드는 방법은 무엇입니까?

  20. 20

    SharedPreference를 사용하여 캔버스에 문자열을 그리는 방법은 무엇입니까?

  21. 21

    CSS를 사용하여 HTML5 캔버스에 색상을 지정하는 방법이 있습니까?

  22. 22

    OpenCV를 사용하여 다각형을 그리는 방법은 무엇입니까?

  23. 23

    다른 검색의 개수를 하나의 (원형) 차트로 누적하는 방법은 무엇입니까?

  24. 24

    테두리가있는 상자에 HTML5 캔버스를 만드는 방법은 무엇입니까?

  25. 25

    HTML5 비디오 태그를 원 모양으로 표시하는 방법은 무엇입니까?

  26. 26

    vba를 사용하여 많은 변형이있는 차원 값의 형식을 올바르게 다시 지정하는 방법은 무엇입니까?

  27. 27

    HTML5 캔버스 컨텍스트를 기본값으로 재설정하는 방법은 무엇입니까?

  28. 28

    Plotly : 여러 꺾은 선형 차트를 단일 그림으로 출력하는 방법은 무엇입니까?

  29. 29

    HTML5 캔버스에서 클릭 한 그리드 정사각형 요소를 찾는 방법

뜨겁다태그

보관