chart.js 도넛 차트 라운드를 적용했는데 max가 되면 원이생기네요....

Question

스택오버플로에서 가져온 코드로 작성하였습니다.라운드 도넛 차트 Chart.defaults.RoundedDoughnut &#61; Chart.helpers.clone(Chart.defaults.doughnut); Chart.controllers.RoundedDoughnut &#61; Chart.controllers.doughnut.extend({ draw: function(ease) { var ctx &#61; this.chart.ctx; var easingDecimal &#61; ease || 1; var arcs &#61; this.getMeta().data; Chart.helpers.each(arcs, function(arc, i) { arc.transition(easingDecimal).draw(); var pArc &#61; arcs[i &#61;&#61;&#61; 0 ? arcs.length - 1 : i - 1]; var pColor &#61; pArc._view.backgroundColor; var vm &#61; arc._view; var radius &#61; (vm.outerRadius &#43; vm.innerRadius) / 2; var thickness &#61; (vm.outerRadius - vm.innerRadius) / 2; var startAngle &#61; Math.PI - vm.startAngle - Math.PI / 2; var angle &#61; Math.PI - vm.endAngle - Math.PI / 2; ctx.save(); ctx.translate(vm.x, vm.y); ctx.fillStyle &#61; i &#61;&#61;&#61; 0 ? vm.backgroundColor : pColor; ctx.beginPath(); ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle &#61; vm.backgroundColor; ctx.beginPath(); ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI); ctx.fill(); ctx.restore(); }); } }); 적용한 라운드 도넛 차트 var config_doughnut &#61; { type: 'RoundedDoughnut', data: { datasets: [{ data: [res.achivementAnalysisAllAvgList, 100-parseFloat(res.achivementAnalysisAllAvgList)], backgroundColor: ['#5b99dd', '#E9EEF4'], label: 'Dataset 1', borderWidth:0 }], labels: { display: false } }, options: { responsive: true, maintainAspectRatio: false, legend: { position: 'top' }, animation: { animateScale: true, animateRotate: true }, tooltips: { enabled: false }, hover :{ animationDuration:0 }, cutoutPercentage: 70 } }; 비루한 영어실력을 가지고 있어서.... 이런거 하나 재대로 보고 고치질 못하네요 ㅠ도움을 구합니다 ㅠ

chart.js 도넛 차트 라운드를 적용했는데 max가 되면 원이생기네요....

0개의 답변

Q&A 목록