mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
Use maxTicksLimit option to calculate the labels size on ticks (#11069)
* Use maxTicksLimit option to calculate the labels size on ticks * apply review
This commit is contained in:
parent
1db46efa5f
commit
8dfcf1c443
@ -8,6 +8,7 @@ import {autoSkip} from './core.scale.autoskip.js';
|
||||
|
||||
const reverseAlign = (align) => align === 'left' ? 'right' : align === 'right' ? 'left' : align;
|
||||
const offsetFromEdge = (scale, edge, offset) => edge === 'top' || edge === 'left' ? scale[edge] + offset : scale[edge] - offset;
|
||||
const getTicksLimit = (ticksLength, maxTicksLimit) => Math.min(maxTicksLimit || ticksLength, ticksLength);
|
||||
|
||||
/**
|
||||
* @typedef { import('./core.controller.js').default } Chart
|
||||
@ -585,7 +586,7 @@ export default class Scale extends Element {
|
||||
calculateLabelRotation() {
|
||||
const options = this.options;
|
||||
const tickOpts = options.ticks;
|
||||
const numTicks = this.ticks.length;
|
||||
const numTicks = getTicksLimit(this.ticks.length, options.ticks.maxTicksLimit);
|
||||
const minRotation = tickOpts.minRotation || 0;
|
||||
const maxRotation = tickOpts.maxRotation;
|
||||
let labelRotation = minRotation;
|
||||
@ -803,7 +804,7 @@ export default class Scale extends Element {
|
||||
ticks = sample(ticks, sampleSize);
|
||||
}
|
||||
|
||||
this._labelSizes = labelSizes = this._computeLabelSizes(ticks, ticks.length);
|
||||
this._labelSizes = labelSizes = this._computeLabelSizes(ticks, ticks.length, this.options.ticks.maxTicksLimit);
|
||||
}
|
||||
|
||||
return labelSizes;
|
||||
@ -815,15 +816,16 @@ export default class Scale extends Element {
|
||||
* @return {{ first: object, last: object, widest: object, highest: object, widths: Array, heights: array }}
|
||||
* @private
|
||||
*/
|
||||
_computeLabelSizes(ticks, length) {
|
||||
_computeLabelSizes(ticks, length, maxTicksLimit) {
|
||||
const {ctx, _longestTextCache: caches} = this;
|
||||
const widths = [];
|
||||
const heights = [];
|
||||
const increment = Math.floor(length / getTicksLimit(length, maxTicksLimit));
|
||||
let widestLabelSize = 0;
|
||||
let highestLabelSize = 0;
|
||||
let i, j, jlen, label, tickFont, fontString, cache, lineHeight, width, height, nestedLabel;
|
||||
|
||||
for (i = 0; i < length; ++i) {
|
||||
for (i = 0; i < length; i += increment) {
|
||||
label = ticks[i].label;
|
||||
tickFont = this._resolveTickFontOptions(i);
|
||||
ctx.font = fontString = tickFont.string;
|
||||
|
37
test/fixtures/scale.category/max-ticks-limit-norotation.js
vendored
Normal file
37
test/fixtures/scale.category/max-ticks-limit-norotation.js
vendored
Normal file
@ -0,0 +1,37 @@
|
||||
const data = Array.from({length: 42}, (_, i) => i + 1);
|
||||
const labels = data.map(v => 'tick' + v);
|
||||
|
||||
module.exports = {
|
||||
description: 'https://github.com/chartjs/Chart.js/issues/10856',
|
||||
config: {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets: [{
|
||||
data
|
||||
}],
|
||||
labels
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: true,
|
||||
maxTicksLimit: 6
|
||||
},
|
||||
grid: {
|
||||
color: 'red'
|
||||
}
|
||||
},
|
||||
y: {display: false}
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
right: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
spriteText: true
|
||||
}
|
||||
};
|
BIN
test/fixtures/scale.category/max-ticks-limit-norotation.png
vendored
Normal file
BIN
test/fixtures/scale.category/max-ticks-limit-norotation.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue
Block a user