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反時計回りをアニメーション化する方法の答えではないが、私はそれがあなたの問題を解決すると思います。

私は、同じデータを持つ1つの棒グラフと1つの円グラフを表示したいという問題があり、棒グラフは数字でソートする必要がありました。あなたが見ることができるように円グラフが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!

アニメーションが時計回りであるが、視覚的効果は正しい。

ドーナツチャートでも同じです。