如何在charts.js 中旋转饼图？答案

【问题标题】：How can I rotate a pie chart in charts.js?如何在charts.js 中旋转饼图？
【发布时间】：2015-03-15 12:50:32
【问题描述】：

看起来charts.js 中的馅饼是通过在圆的上半部分取垂直半径，然后从那里顺时针移动来绘制的。这在大多数情况下都很好用，但是对于只有 2 个类别的饼图，如果可以旋转它以使切片居中，那就太好了，如下所示：

旋转是通过取 360 的百分比除以 2 来计算的。(.14*360)/2 = 25.2 左度，所以如果我可以申请的话

transform: rotate(-25.2deg);

到那个圈子我就好了。

由于charts.js 将它放在画布上（而不是<svg>），我不知道如何对其应用任何转换。不确定是否相关，但这是我的图表代码：

HTML

<canvas id=canvas style='width:300px;height:300px;'></canvas>

openRate = [
            {
                value: 488,
                color: "#FF9030",
                highlight: "rgba(255, 144, 48, 0.44)",
            },
            {
                value: 3475,
                color: "#008DB7",
                highlight: "rgba(0, 141, 183, 0.82)"
            }
        ];

var ctx=document.getElementById('canvas').getContext("2d");
var chart=new Chart(ctx).Pie(openRate);

还有一个小提琴： http://jsfiddle.net/msy6kf3a/

【问题讨论】：

标签： javascript jquery css canvas chart.js

【解决方案1】：

您可以使用 CSS3 旋转： JSFIDDLE DEMO

#canvas{
   width:300px;
   height:300px; 
   -ms-transform: rotate(-25.2deg); /* IE 9 */
   -webkit-transform: rotate(-25.2deg); /* Chrome, Safari, Opera */
   transform: rotate(-25.2deg);
}

【讨论】：

zomg 我只是将旋转应用到画布本身，因为我无法操纵它的内容。（捂脸！）谢谢
很高兴帮助@chiliNUT
@JRulle 的问题是，所有标签现在都将被抵消。将鼠标悬停在您的饼图上以了解我的意思。有没有办法旋转图表本身？

【解决方案2】：

你可以使用

chartjs 中的轮换选项

我正在使用“版本：2.1.6”

var options = {
   rotation: (-0.5 * Math.PI) - (25/180 * Math.PI)
}

var Chart = new Chart(ctx,{
  type: 'pie',
  data: data,
  options: options
});

更新fiddle

【讨论】：

这应该是正确的答案，因为它根本不是解决方法