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

Question

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

旋转的计算方法是取 360 度的百分比除以 2。(.14*360)/2 = 25.2剩下的学位，所以如果我可以申请

transform: rotate(-25.2deg);

到圈子我就好了。

自 charts.js把它放在 Canvas 上(而不是 <svg> )我不知道如何对此应用任何转换。不确定是否相关，但这是我的图表代码:

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

还有一把 fiddle : http://jsfiddle.net/msy6kf3a/

Answer 1

你可以使用

Rotation Options in 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