저는 오랫동안 echars를 사용해왔는데, 위와 같은 스타일의 원형 차트가 나타나면 공식 문서에는 이 모드에서 원형 차트가 없기 때문에 사용하기 어렵습니다. 저는 캔버스에 익숙하고 d3도 플러그인을 도입해야 하기 때문에 경량화 원칙에 따라 캔버스 캡슐화를 사용하여 각각 d3와 캔버스를 사용해 보았습니다.
두 가지 공식 원형 차트 모드가 있습니다. (1) 반경 모드 (2) 영역 모드
구현 프로세스(1) 캡슐화된 기능은 다음과 같습니다.
function drawCircle(canvasId, option) { const color_arr = option.color let data_arr = option.data const pi2 = Math.PI * 2; let canvas = document.getElementById(canvasId) let c = canvas.getContext(2d); startAgl = 0; let sum = 0; const cW = const cH = canvas.height; for (data_arr의 항목) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { name: v.name, value: (v.value) * 1.0 / sum } }) for (let i = 0; i < data_arr.length; i++) { //원형 차트 그리기 let min = (cW > cH ? cH : cW); //캔버스 너비와 높이의 최소값을 구합니다. agl = data_arr[i].value * pi2 + startAgl; //끝점 c.StrokeStyle = color_arr[i]; * min * 0.3; // 선 두께 c.beginPath() c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); //원 그리기 c.closePath(); startAgl = agl; //범례 그리기 c.fillStyle = cW * 0.8, 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * i) } }(2) 호출 방법:
let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588']; let option = { 색상: 색상, 데이터: [ { 이름: '20', 값: '20' }, { 이름: '30', 값: '30' }, { 이름: '40', 값: '40' }, { 이름: '50', 값: '50' }, { 이름: '60', 값: '60' }, ] } drawCircle('myCanvas', 옵션 )위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.