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

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

旋转的计算方法是将360的百分比除以2. (.14*360)/2 = 25.2度，如果我可以申请

 transform: rotate(-25.2deg); 

到圆圈我会很好。

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

HTML

JS

 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/

Answer 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); } 

Answer 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 }); 

更新小提琴