看起来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>
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);
答案 0 :(得分:6)
您可以使用
中的轮播选项
我正在使用&#34;版本:2.1.6&#34;
var options = {
rotation: (-0.5 * Math.PI) - (25/180 * Math.PI)
}
var Chart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});
更新了fiddle
答案 1 :(得分:2)
您可以使用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);
}