Chart.js 도넛 형 애니메이션/시계 방향으로 그리기

Question

현재 chart.js 도넛은 맨 위에서 시작하여 시계 방향으로 움직입니다. 반 시계 방향으로 애니메이션을 맨 위에서 시작하고 애니메이션을 되돌리려합니다.

var myDoughnutChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: data, 
    options: { 
    cutoutPercentage: 50, 
    circumference: 1.6 * Math.PI, 
    animation:{ 
     animateRotate: true, 
     render: false, 
    }, 
    } 
}); 

Answer 1

이이 ChartJs 반 시계 방향을 애니메이션하는 방법을 구체적으로 에 대답하지

정렬 된 데이터를 역

,하지만 난이 문제를 해결할 것 같아요.

하나의 막 대형 차트와 하나의 원형 차트를 동일한 데이터로 표시하려고 할 때 문제가 발생했습니다. 막 대형 차트는 숫자로 정렬해야합니다. 당신이 볼 수있는 파이 차트가 clockwised 애니메이션 있기 때문에, 데이터의 '순서'는 원형 차트에 막대 차트는 다른,

First attempt

그러나이 내가 첫째로, 무엇을 가지고 있습니다. 막 대형 차트에서 나는 파란색, 빨간색 및 노란색을 가졌으며 원형 차트에서 시각적으로 말해서 나는 노란색, 빨간색 및 파란색을 가졌습니다.

막대 그래프를 생성 한 후 레이블, 데이터 및 색상 배열을 뒤집은 것입니다. 차트 선언의 전설 순서를 반대로해야합니다, 또한

var backgroundColors = [bgColor1, bgColor2, ...]; 
var borderColors = [bdColor1, bdColor2, ...]; 

dataArrayReversed = dataArray.reverse(); 
labelsArrayReversed = labelsArray.reverse(); 
backgroundColorsReversed = backgroundColors.slice(0, dataArray.length).reverse(); 
borderColorsReversed = borderColors.slice(0, dataArray.length).reverse(); 

, 그래서 주문한 상태로 유지 : 참조

var pieChart = new Chart(ctxPie, { 
         type: 'pie', 
         data: { 
          labels: labelsArrayReversed, 
          datasets: [ 
            data: dataArrayReversed, 
            backgroundColor: backgroundColorsReversed, 
            borderColors: borderColorsReversed, 
            borderWidth: 2 
          ] 
         }, 
         options: { 
          legend: { reverse: true } 
         } 
        }); 

Yay!

애니메이션 시계 방향이지만, 시각적 효과가 정확합니다.

도넛 형 차트와 동일합니다.