Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-04 07:24:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Radial scale point label backdrop color (#8633)

Browse Source 
* Radial scale point label backdrop color

* Update default tests

* backdropPadding is a single setting

* Up the tolerance a bit

* Update tick backdrop padding options
This commit is contained in:
Evert Timberg
2021-03-13 17:37:43 -05:00
committed by GitHub
parent 96f6b42c57
commit d84db2cefc
7 changed files with 94 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,14 @@ import {HALF_PI, isNumber, TAU, toDegrees, toRadians, _normalizeAngle} from '../
import LinearScaleBase from './scale.linearbase';
import Ticks from '../core/core.ticks';
import {valueOrDefault, isArray, isFinite, callback as callCallback, isNullOrUndef} from '../helpers/helpers.core';
import {toFont} from '../helpers/helpers.options';
import {toFont, toPadding} from '../helpers/helpers.options';
function getTickBackdropHeight(opts) {
const tickOpts = opts.ticks;
if (tickOpts.display && opts.display) {
return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + tickOpts.backdropPaddingY * 2;
const padding = toPadding(tickOpts.backdropPadding);
return valueOrDefault(tickOpts.font && tickOpts.font.size, defaults.font.size) + padding.height;
}
return 0;
}
@@ -202,7 +203,15 @@ function drawPointLabels(scale, labelCount) {
for (let i = labelCount - 1; i >= 0; i--) {
const optsAtIndex = pointLabels.setContext(scale.getContext(i));
const plFont = toFont(optsAtIndex.font);
const {x, y, textAlign} = scale._pointLabelItems[i];
const {x, y, textAlign, left, top, right, bottom} = scale._pointLabelItems[i];
const {backdropColor} = optsAtIndex;
if (!isNullOrUndef(backdropColor)) {
const padding = toPadding(optsAtIndex.backdropPadding);
ctx.fillStyle = backdropColor;
ctx.fillRect(left - padding.left, top - padding.top, right - left + padding.width, bottom - top + padding.height);
}
renderText(
ctx,
scale._pointLabels[i],
@@ -532,12 +541,12 @@ export default class RadialLinearScale extends LinearScaleBase {
width = ctx.measureText(tick.label).width;
ctx.fillStyle = optsAtIndex.backdropColor;
const {backdropPaddingX, backdropPaddingY} = optsAtIndex;
const padding = toPadding(optsAtIndex.backdropPadding);
ctx.fillRect(
-width / 2 - backdropPaddingX,
-offset - tickFont.size / 2 - backdropPaddingY,
width + backdropPaddingX * 2,
tickFont.size + backdropPaddingY * 2
-width / 2 - padding.left,
-offset - tickFont.size / 2 - padding.top,
width + padding.width,
tickFont.size + padding.height
);
}
@@ -588,16 +597,18 @@ RadialLinearScale.defaults = {
// String - The colour of the label backdrop
backdropColor: 'rgba(255,255,255,0.75)',
// Number - The backdrop padding above & below the label in pixels
backdropPaddingY: 2,
// Number - The backdrop padding to the side of the label in pixels
backdropPaddingX: 2,
// Number/Object - The backdrop padding of the label in pixels
backdropPadding: 2,
callback: Ticks.formatters.numeric
},
pointLabels: {
backdropColor: undefined,
// Number - The backdrop padding above & below the label in pixels
backdropPadding: 2,
// Boolean - if true, show point labels
display: true,