反转数据排序

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逆时针的答案，但我认为它将解决您的问题。

我遇到了一个问题，我想要显示一个条形图和一个具有相同数据的饼图，并且条形图必须按数字排序（从大到小）。这就是我得到的，首先是：

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!

动画是顺时针方向，但视觉效果正确。

甜甜圈图表也是如此。

Chart.js圆环动画/顺时针绘制

1 个答案:

反转数据排序