如何在charts.js中旋转饼图？ [英] How can I rotate a pie chart in charts.js?

问题描述

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

It looks like a pie in charts.js is drawn by taking a vertical radius on the top half of the circle, and then moving clockwise from there. This works great most of the time, but for a pie with only 2 categories, it would be nice if it could be rotated so that the slice is centered, like this:

计算轮换取百分之360并除以2. （。14 * 360）/ 2 = 25.2 度数，所以如果我可以申请

The rotation is calculated by taking the percentage of 360 and dividing by 2. (.14*360)/2 = 25.2 degrees left, so if I could just apply

transform: rotate(-25.2deg);

到圆圈我会很好。

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

Since charts.js puts this on a canvas (as opposed to <svg>) I don't know how to apply any transformations to this. Not sure if relevant, but here is my code for the chart:

HTML

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

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/

推荐答案

你可以使用CSS3旋转：    JSFIDDLE DEMO

You can rotate using 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);
}

这篇关于如何在charts.js中旋转饼图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！