HTML / JS 캔버스 도넛 차트 ovlerap으로 원형 획을 만드는 방법은 무엇입니까?
루카스 R.
내 도넛 차트가 내가 원하는대로 작동하지 않는다는 문제가 있습니다. 다음과 같은 도넛 차트를 만들고 싶습니다.
그러나 내 도넛 차트는 현재 다음과 같습니다.
보시다시피 스트로크가 올바른 방향으로 겹치지 않습니다. 오른쪽에서 왼쪽으로 획을 그리기 시작했기 때문에 이것이 될 수 있다고 생각합니다. 대신 왼쪽에서 오른쪽으로 그려야하므로 오른쪽 둥근 끝이 아닌 왼쪽 "둥근 끝"이 표시됩니다.
이것이 내가 지금까지 시도한 것입니다.
//function to draw the donut chart, ctx = context, cx - cy = position, radius and arcwith
dmbChart(ctx, cx, cy, radius, arcwidth) {
var tot = 0;
var accum = 0;
var PI = Math.PI;
var PI2 = PI * 2;
var offset = -PI/2;
for(var i = 0; i < this.canvasValues.length; i++) {
tot += this.canvasValues[i];
}
//Donut Sectors Color: Draw each stroke based on the value (canvasValues) and Color (canvasColors)
for(var i = 0; i < this.canvasValues.length; i++) {
ctx.lineWidth = arcwidth;
ctx.beginPath();
ctx.lineCap = "round";
ctx.arc(cx, cy, radius, offset + PI2 * (accum/tot), offset + PI2 * ((accum + this.canvasValues[i]) / tot));
ctx.strokeStyle = this.canvasColors[i];
ctx.stroke();
accum += this.canvasValues[i];
}
}
보시다시피 각 획의 길이와 색상의 백분율 값을 얻습니다. 위에서 시작하여 위에서-> 오른쪽-> 아래-> 왼쪽에서 하나씩 그려서 이것이 결과입니다. 그러나 결과를 얻기 위해 어떻게 수정할 수 있습니까?
편집 : @Helder Sepulveda의 도움으로 지금 이렇게 만들었습니다. 많은 계산을 변경하여 변경 사항과 함께 제공되는 일부 버그를 수정했습니다. 이제 유일한 문제는 맨 위에서 그리기 시작하지 않는다는 것입니다. 보시다시피 녹색 선이 맨 위에서 시작해야합니다.
function dmbChart(ctx, cx, cy, radius, arcwidth) {
var canvasValues = [30, 5, 15, 10, 10, 10, 10, 10];
var canvasColors = ["#10dc60", "#DDDDDD", "#0cd1e8", "#ffce00", "#7044ff", "#f04141", "#ffea00", "#ee82ee"];
ctx.lineWidth = arcwidth;
ctx.lineCap = "round";
var accum = canvasValues.reduce((a,b) => a + b, 0);
for (var i = canvasValues.length-1; i >= 0; i--) {
var radians = canvasValues[i] / 100 * 360 * Math.PI / 180
ctx.beginPath();
ctx.arc(cx, cy, radius, accum, accum - radians, true);
ctx.strokeStyle = canvasColors[i];
ctx.stroke();
accum -= radians;
}
ctx.beginPath();
ctx.arc(cx, cy, radius, accum, accum - (0.1 / 100 * 360 * Math.PI / 180), true);
ctx.strokeStyle = canvasColors[canvasColors.length - 1];
ctx.stroke();
}
const canvas = document.getElementById("c");
canvas.width = canvas.height = 140;
const ctx = canvas.getContext("2d");
dmbChart(ctx, 70, 70, 50, 30)<canvas id="c"></canvas> 클리어 세풀베다
나는 몇 가지 가정을 canvasValues하고 canvasColors작동하는 것을 보여주고 있습니다.
function dmbChart(ctx, cx, cy, radius, arcwidth) {
var accum = 0;
var PI = Math.PI;
var PI2 = PI * 2;
var offset = -PI / 2;
var canvasValues = [10, 10, 10]
var canvasColors = ["red", "green", "blue"]
var tot = canvasValues.reduce((a, b) => a + b, 0)
ctx.lineWidth = arcwidth;
ctx.lineCap = "round";
for (var i = 0; i < canvasValues.length; i++) {
ctx.beginPath();
ctx.arc(cx, cy, radius, offset + PI2 * (accum / tot), offset + PI2 * ((accum + canvasValues[i]) / tot));
ctx.strokeStyle = canvasColors[i];
ctx.stroke();
accum += canvasValues[i];
}
ctx.beginPath();
ctx.arc(cx, cy, radius, offset, offset);
ctx.strokeStyle = canvasColors[0];
ctx.stroke();
}
const canvas = document.getElementById("c");
canvas.width = canvas.height = 140;
const ctx = canvas.getContext("2d");
dmbChart(ctx, 70, 70, 50, 30)<canvas id="c"></canvas>아이디어는 루프의 끝에 첫 번째 값 (및 색상)을 사용하여 마지막 "짧은"호를 그리는 것입니다.
또한 루프에서 몇 줄을 옮겼습니다.
ctx.lineWidth = arcwidth;
ctx.lineCap = "round";
루프 전에 한 번만 설정할 수 있습니다.
그리고 여기에 우리가 방향을 뒤집는 의견에서 이야기 한 내용이 있습니다.
function dmbChart(ctx, cx, cy, radius, arcwidth) {
var PI = Math.PI;
var PI2 = PI * 2;
var offset = -PI / 2;
var canvasValues = [10, 10, 10]
var canvasColors = ["red", "green", "blue"]
var tot = canvasValues.reduce((a,b) => a + b, 0)
var accum = tot;
ctx.lineWidth = arcwidth;
ctx.lineCap = "round";
for (var i = canvasValues.length-1; i >= 0; i--) {
ctx.beginPath();
ctx.arc(cx, cy, radius, offset + PI2 * (accum / tot), offset + PI2 * ((accum + canvasValues[i]) / tot));
ctx.strokeStyle = canvasColors[i];
ctx.stroke();
accum -= canvasValues[i];
}
ctx.beginPath();
p = offset + PI2 * ((tot + canvasValues[canvasValues.length-1]) / tot)
ctx.arc(cx, cy, radius, p, p);
ctx.strokeStyle = canvasColors[canvasColors.length-1];
ctx.stroke();
}
const canvas = document.getElementById("c");
canvas.width = canvas.height = 140;
const ctx = canvas.getContext("2d");
dmbChart(ctx, 70, 70, 50, 30)<canvas id="c"></canvas>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
- 이전 게시물：SELECT 쿼리를 위해 C # / ADO.NET에서 SQL Server 2016 스냅 샷 격리 구현
- 다음 포스트：ECMAScript의 "Abstract Relational Comparison Algorithm"에서 "LeftFirst"부울 플래그는 정확히 무엇입니까?
관련 기사
Related 관련 기사
- 1
HTML 테이블의 각 행을 Highcharts에서 원형 차트로 만드는 방법은 무엇입니까?
- 2
amcharts를 사용하여 다중 링 도넛 원형 차트를 만드는 방법은 무엇입니까?
- 3
Chart.js의 도넛 형 차트에서 방사형 CanvasGradients를 사용하는 방법은 무엇입니까?
- 4
원형 차트 / 도넛 차트의 반경을 찾는 방법
- 5
CSS를 사용하지 않고 원형 도넛 형 차트 도구 설명을 투명하게 해결하는 방법은 무엇입니까?
- 6
Plotly : 도넛 형 차트에서 색상을 사용자 지정하는 방법은 무엇입니까?
- 7
HTML5 / Html로 도형을 만드는 방법은 무엇입니까?
- 8
Chart.js로 만든 도넛 형 차트가 표시되지 않는 이유는 무엇입니까?
- 9
P5.js 설정을 연결하고 HTML 캔버스로 그리는 방법은 무엇입니까?
- 10
원형 차트를 대화 형으로 만드는 방법은 무엇입니까? charts_flutter의 원형 차트 onChangedListener 콜백을받지 못함
- 11
원형 차트를 대화 형으로 만드는 방법은 무엇입니까? charts_flutter의 원형 차트 onChangedListener 콜백을받지 못함
- 12
캔버스에 HTML로 비트 맵 파일을 그리는 방법은 무엇입니까?
- 13
HTML5 캔버스를 사용하여 다단계 원형 차트를 그리는 방법은 무엇입니까?
- 14
처리중인 원형 차트에 대해 별도의 클래스 탭을 만드는 방법은 무엇입니까?
- 15
반응 스트랩 버튼을 반응 형으로 만드는 방법은 무엇입니까?
- 16
캔버스가있는 원형 차트에서 희미한 어두운 선을 제거하는 방법은 무엇입니까?
- 17
C ++ 프로그램에 대한 테스트 실행 / 계획을 만드는 방법은 무엇입니까?
- 18
d3.js 도넛 차트에서 등 그룹을 만드는 방법을 알고 싶습니다.
- 19
도넛 형 차트 조각에 이미지를 표시하는 방법은 무엇입니까?
- 20
범례가있는 도넛 형 차트 중간에 제목을 표시하는 방법은 무엇입니까? (react-highcharts)
- 21
Angular Chart에서 도넛 형 차트의 데이터 항목에 특정 색상을 할당하는 방법은 무엇입니까?
- 22
HTML 캔버스에서 원하지 않는 줄을 삭제하는 방법은 무엇입니까?
- 23
Angular Chart의 도넛 차트 안에 제목을 추가하는 방법은 무엇입니까?
- 24
Highchart에서 도넛 차트의 색상을 변경하는 방법은 무엇입니까?
- 25
그림과 텍스트 CSS 부 트랩으로 직사각형을 만드는 방법은 무엇입니까?
- 26
슬라이스 클릭시 도넛 차트에서 슬라이스 색상을 변경하는 방법은 무엇입니까?
- 27
CSS의 도움으로 html의 텍스트로 아이콘을 표시하는 방법은 무엇입니까?
- 28
Android 캔버스에 부분 원형 사각형을 그리는 방법은 무엇입니까?
- 29
HTML 캔버스의 경우 텍스트와 함께 clip ()을 경로로 사용하는 방법은 무엇입니까?
몇 마디 만하겠습니다