Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

When a radial scale is rotated using the startAngle option, the tick labels did not appear in the correct places. (#4682)

Browse Source
This commit is contained in:
Evert Timberg 2017-08-21 18:17:49 -04:00 committed by GitHub
parent 0e5ce3f4e7
commit 5a3de5163a
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/scales/scale.radialLinear.js
View File

@ -473,6 +473,7 @@ module.exports = function(Chart) {
if (opts.display) { if (opts.display) {
var ctx = me.ctx; var ctx = me.ctx;
var startAngle = this.getIndexAngle(0);
// Tick Font // Tick Font
var tickFontSize = valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize); var tickFontSize = valueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
@ -484,7 +485,6 @@ module.exports = function(Chart) {
// Don't draw a centre value (if it is minimum) // Don't draw a centre value (if it is minimum)
if (index > 0 || tickOpts.reverse) { if (index > 0 || tickOpts.reverse) {
var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]); var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
var yHeight = me.yCenter - yCenterOffset;
// Draw circular lines around the scale // Draw circular lines around the scale
if (gridLineOpts.display && index !== 0) { if (gridLineOpts.display && index !== 0) {
@ -495,12 +495,16 @@ module.exports = function(Chart) {
var tickFontColor = valueOrDefault(tickOpts.fontColor, globalDefaults.defaultFontColor); var tickFontColor = valueOrDefault(tickOpts.fontColor, globalDefaults.defaultFontColor);
ctx.font = tickLabelFont; ctx.font = tickLabelFont;
ctx.save();
ctx.translate(me.xCenter, me.yCenter);
ctx.rotate(startAngle);
if (tickOpts.showLabelBackdrop) { if (tickOpts.showLabelBackdrop) {
var labelWidth = ctx.measureText(label).width; var labelWidth = ctx.measureText(label).width;
ctx.fillStyle = tickOpts.backdropColor; ctx.fillStyle = tickOpts.backdropColor;
ctx.fillRect( ctx.fillRect(
me.xCenter - labelWidth / 2 - tickOpts.backdropPaddingX, -labelWidth / 2 - tickOpts.backdropPaddingX,
yHeight - tickFontSize / 2 - tickOpts.backdropPaddingY, -yCenterOffset - tickFontSize / 2 - tickOpts.backdropPaddingY,
labelWidth + tickOpts.backdropPaddingX * 2, labelWidth + tickOpts.backdropPaddingX * 2,
tickFontSize + tickOpts.backdropPaddingY * 2 tickFontSize + tickOpts.backdropPaddingY * 2
); );
@ -509,7 +513,8 @@ module.exports = function(Chart) {
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.fillStyle = tickFontColor; ctx.fillStyle = tickFontColor;
ctx.fillText(label, me.xCenter, yHeight); ctx.fillText(label, 0, -yCenterOffset);
ctx.restore();
} }
} }
}); });