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

Linear scale has proper padding in both vertical and horizontal orientations. Should prevent labels from getting cut off even when axes are not displayed.

Browse Source
This commit is contained in:
Evert Timberg 2015-08-08 11:52:20 -04:00
parent 9dfa9e8e66
commit 87ac933c10
1 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/scales/scale.linear.js
View File

@ -166,10 +166,14 @@
var range = this.end - this.start;
if (this.isHorizontal()) {
pixel = this.left + (this.width / range * (value - this.start));
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
pixel = this.left + (innerWidth / range * (value - this.start));
pixel += this.paddingLeft;
} else {
// Bottom - top since pixels increase downard on a screen
pixel = this.bottom - (this.height / range * (value - this.start));
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
pixel = this.bottom - (innerHeight / range * (value - this.start));
pixel += this.paddingTop;
}
return pixel;
@ -343,7 +347,7 @@
// @param {number} maxWidth : the max width the axis can be
// @param {number} maxHeight: the max height the axis can be
// @return {object} minSize : the minimum size needed to draw the axis
fit: function(maxWidth, maxHeight) {
fit: function(maxWidth, maxHeight, margins) {
this.calculateRange();
this.generateTicks(maxWidth, maxHeight);
this.buildLabels();
@ -386,6 +390,10 @@
minSize.height = maxHeight; // fill all the height
}
this.paddingLeft = 0;
this.paddingRight = 0;
this.paddingTop = 0;
this.paddingBottom = 0;
if (this.options.labels.show && this.options.display) {
@ -398,6 +406,16 @@
var maxLabelHeight = maxHeight - minSize.height;
var labelHeight = 1.5 * this.options.labels.fontSize;
minSize.height = Math.min(maxHeight, minSize.height + labelHeight);
var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
this.ctx.font = labelFont;
var firstLabelWidth = this.ctx.measureText(this.labels[0]).width;
var lastLabelWidth = this.ctx.measureText(this.labels[this.labels.length - 1]).width;
// Ensure that our labels are always inside the canvas
this.paddingLeft = firstLabelWidth / 2;
this.paddingRight = lastLabelWidth / 2;
} else {
// A vertical axis is more constrained by the width. Labels are the dominant factor
// here, so get that length first
@ -407,13 +425,29 @@
if (largestTextWidth < maxLabelWidth) {
// We don't need all the room
minSize.width += largestTextWidth;
minSize.width += 3; // extra padding
} else {
// Expand to max size
minSize.width = maxWidth;
}
this.paddingTop = this.options.labels.fontSize / 2;
this.paddingBottom = this.options.labels.fontSize / 2;
}
}
if (margins) {
this.paddingLeft -= margins.left;
this.paddingTop -= margins.top;
this.paddingRight -= margins.right;
this.paddingBottom -= margins.bottom;
this.paddingLeft = Math.max(this.paddingLeft, 0);
this.paddingTop = Math.max(this.paddingTop, 0);
this.paddingRight = Math.max(this.paddingRight, 0);
this.paddingBottom = Math.max(this.paddingBottom, 0);
}
this.width = minSize.width;
this.height = minSize.height;
return minSize;