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:
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);
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. 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);
And a fiddle: http://jsfiddle.net/msy6kf3a/
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.