archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Use ticks.maxTicksLimit to limit gridlines (fixes #1859); use getValueOrDefault for resolving the maxTicksLimit option

Browse Source
This commit is contained in:
Morley Zhi 2016-01-07 10:44:56 -05:00
parent 1967bef9f6
commit 6478f93ded
3 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/01-Scales.md
View File

@ -53,6 +53,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
*ticks*.fontStyle | String | "normal" | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
*ticks*.maxRotation | Number | 90 | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
*ticks*.minRotation | Number | 20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary. *Note: Only applicable to horizontal scales.*
*ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show.
*ticks*.padding | Number | 10 | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.*
*ticks*.mirror | Boolean | false | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
*ticks*.reverse | Boolean | false | Reverses order of tick labels.
@ -259,7 +260,7 @@ The radial linear scale extends the core scale class with the following tick tem
//Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
//Number - Limit the maximum number of ticks
//Number - Limit the maximum number of ticks and gridlines
maxTicksLimit: 11,
},

32
src/core/core.scale.js
View File

@ -432,6 +432,27 @@
var scaleLabelY;
var useAutoskipper = this.options.ticks.autoSkip;
// figure out the maximum number of gridlines to show
var maxTicks;
if (this.isHorizontal()) {
maxTicks = Math.min(
helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
Math.ceil(this.width / 50)
);
} else {
// The factor of 2 used to scale the font size has been experimentally determined.
maxTicks = Math.min(
helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
Math.ceil(this.height / (2 * this.options.ticks.fontSize))
);
}
// Make sure we always have at least 2 ticks
maxTicks = Math.max(2, maxTicks);
// Make sure we draw text in the correct color and font
this.ctx.fillStyle = this.options.ticks.fontColor;
var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
@ -454,6 +475,17 @@
if (!useAutoskipper) {
skipRatio = false;
}
// if they defined a max number of ticks,
// increase skipRatio until that number is met
if (maxTicks) {
while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
if (!skipRatio) {
skipRatio = 1;
}
skipRatio += 1;
}
}
helpers.each(this.ticks, function(label, index) {
// Blank ticks

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

@ -159,12 +159,16 @@
var maxTicks;
if (this.isHorizontal()) {
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
Math.ceil(this.width / 50));
maxTicks = Math.min(
helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
Math.ceil(this.width / 50)
);
} else {
// The factor of 2 used to scale the font size has been experimentally determined.
maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
// The factor of 2 used to scale the font size has been experimentally determined.
maxTicks = Math.min(
helpers.getValueOrDefault(this.options.ticks.maxTicksLimit, 11),
Math.ceil(this.height / (2 * this.options.ticks.fontSize))
);
}
// Make sure we always have at least 2 ticks