[英]How can I rotate a pie chart in charts.js?
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. 它看起来像是
charts.js
的饼图, charts.js
是在圆的上半部取一个垂直半径,然后从那里顺时针移动。 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: 这在大多数情况下都有效,但是对于只有两个类别的派,如果可以旋转它以便使切片居中,那将是很好的,如下所示:
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 旋转是通过将360的百分比除以2来计算的。
(.14*360)/2 = 25.2
剩下(.14*360)/2 = 25.2
度,所以如果我可以应用
transform: rotate(-25.2deg);
to the circle I would be good. 到圈子我会很好。
Since charts.js
puts this on a canvas (as opposed to <svg>
) I don't know how to apply any transformations to this. 由于
charts.js
放置在画布上(与<svg>
相对),所以我不知道如何对此应用任何转换。 Not sure if relevant, but here is my code for the chart: 不确定是否相关,但这是我的图表代码:
HTML 的HTML
<canvas id=canvas style='width:300px;height:300px;'></canvas>
JS 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);
And a fiddle: http://jsfiddle.net/msy6kf3a/ 和一个小提琴: http : //jsfiddle.net/msy6kf3a/
You Can use the 您可以使用
Rotation Options in chartjs
chart.js中的旋转选项
I'm using "Version: 2.1.6" 我正在使用“版本: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
});
You can rotate using CSS3: JSFIDDLE DEMO 您可以使用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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.