mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Linear scale has proper padding in both vertical and horizontal orientations. Should prevent labels from getting cut off even when axes are not displayed.
This commit is contained in:
parent
9dfa9e8e66
commit
87ac933c10
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user