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

enable pointStyleWidth for all legend style (#10639)

Browse Source
This commit is contained in:
Dominic Jean 2022-09-01 06:37:12 -04:00 committed by GitHub
parent eee1bf257b
commit 0edb2ac604
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 260 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/configuration/legend.md
View File

@ -66,7 +66,7 @@ Namespace: `options.plugins.legend.labels`
| [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true. | [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
| `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`. | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
| `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size). | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).
| `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend (only for `circle`, `rect` and `line` point stlye). | `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend.
| `useBorderRadius` | `boolean` | `false` | Label borderRadius will match coresponding borderRadius. | `useBorderRadius` | `boolean` | `false` | Label borderRadius will match coresponding borderRadius.
| `borderRadius` | `number` | `undefined` | Override the borderRadius to use. | `borderRadius` | `number` | `undefined` | Override the borderRadius to use.

61
src/helpers/helpers.canvas.js
View File

@ -131,7 +131,7 @@ export function drawPoint(ctx, options, x, y) {
} }
export function drawPointLegend(ctx, options, x, y, w) { export function drawPointLegend(ctx, options, x, y, w) {
let type, xOffset, yOffset, size, cornerRadius, width; let type, xOffset, yOffset, size, cornerRadius, width, xOffsetW, yOffsetW;
const style = options.pointStyle; const style = options.pointStyle;
const rotation = options.rotation; const rotation = options.rotation;
const radius = options.radius; const radius = options.radius;
@ -166,11 +166,12 @@ export function drawPointLegend(ctx, options, x, y, w) {
ctx.closePath(); ctx.closePath();
break; break;
case 'triangle': case 'triangle':
ctx.moveTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius); width = w ? w / 2 : radius;
ctx.moveTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
rad += TWO_THIRDS_PI; rad += TWO_THIRDS_PI;
ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius); ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
rad += TWO_THIRDS_PI; rad += TWO_THIRDS_PI;
ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius); ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
ctx.closePath(); ctx.closePath();
break; break;
case 'rectRounded': case 'rectRounded':
@ -184,11 +185,13 @@ export function drawPointLegend(ctx, options, x, y, w) {
cornerRadius = radius * 0.516; cornerRadius = radius * 0.516;
size = radius - cornerRadius; size = radius - cornerRadius;
xOffset = Math.cos(rad + QUARTER_PI) * size; xOffset = Math.cos(rad + QUARTER_PI) * size;
xOffsetW = Math.cos(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
yOffset = Math.sin(rad + QUARTER_PI) * size; yOffset = Math.sin(rad + QUARTER_PI) * size;
ctx.arc(x - xOffset, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI); yOffsetW = Math.sin(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
ctx.arc(x + yOffset, y - xOffset, cornerRadius, rad - HALF_PI, rad); ctx.arc(x - xOffsetW, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
ctx.arc(x + xOffset, y + yOffset, cornerRadius, rad, rad + HALF_PI); ctx.arc(x + yOffsetW, y - xOffset, cornerRadius, rad - HALF_PI, rad);
ctx.arc(x - yOffset, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI); ctx.arc(x + xOffsetW, y + yOffset, cornerRadius, rad, rad + HALF_PI);
ctx.arc(x - yOffsetW, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
ctx.closePath(); ctx.closePath();
break; break;
case 'rect': case 'rect':
@ -201,39 +204,47 @@ export function drawPointLegend(ctx, options, x, y, w) {
rad += QUARTER_PI; rad += QUARTER_PI;
/* falls through */ /* falls through */
case 'rectRot': case 'rectRot':
xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
xOffset = Math.cos(rad) * radius; xOffset = Math.cos(rad) * radius;
yOffset = Math.sin(rad) * radius; yOffset = Math.sin(rad) * radius;
ctx.moveTo(x - xOffset, y - yOffset); yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
ctx.lineTo(x + yOffset, y - xOffset); ctx.moveTo(x - xOffsetW, y - yOffset);
ctx.lineTo(x + xOffset, y + yOffset); ctx.lineTo(x + yOffsetW, y - xOffset);
ctx.lineTo(x - yOffset, y + xOffset); ctx.lineTo(x + xOffsetW, y + yOffset);
ctx.lineTo(x - yOffsetW, y + xOffset);
ctx.closePath(); ctx.closePath();
break; break;
case 'crossRot': case 'crossRot':
rad += QUARTER_PI; rad += QUARTER_PI;
/* falls through */ /* falls through */
case 'cross': case 'cross':
xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
xOffset = Math.cos(rad) * radius; xOffset = Math.cos(rad) * radius;
yOffset = Math.sin(rad) * radius; yOffset = Math.sin(rad) * radius;
ctx.moveTo(x - xOffset, y - yOffset); yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
ctx.lineTo(x + xOffset, y + yOffset); ctx.moveTo(x - xOffsetW, y - yOffset);
ctx.moveTo(x + yOffset, y - xOffset); ctx.lineTo(x + xOffsetW, y + yOffset);
ctx.lineTo(x - yOffset, y + xOffset); ctx.moveTo(x + yOffsetW, y - xOffset);
ctx.lineTo(x - yOffsetW, y + xOffset);
break; break;
case 'star': case 'star':
xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
xOffset = Math.cos(rad) * radius; xOffset = Math.cos(rad) * radius;
yOffset = Math.sin(rad) * radius; yOffset = Math.sin(rad) * radius;
ctx.moveTo(x - xOffset, y - yOffset); yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
ctx.lineTo(x + xOffset, y + yOffset); ctx.moveTo(x - xOffsetW, y - yOffset);
ctx.moveTo(x + yOffset, y - xOffset); ctx.lineTo(x + xOffsetW, y + yOffset);
ctx.lineTo(x - yOffset, y + xOffset); ctx.moveTo(x + yOffsetW, y - xOffset);
ctx.lineTo(x - yOffsetW, y + xOffset);
rad += QUARTER_PI; rad += QUARTER_PI;
xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
xOffset = Math.cos(rad) * radius; xOffset = Math.cos(rad) * radius;
yOffset = Math.sin(rad) * radius; yOffset = Math.sin(rad) * radius;
ctx.moveTo(x - xOffset, y - yOffset); yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
ctx.lineTo(x + xOffset, y + yOffset); ctx.moveTo(x - xOffsetW, y - yOffset);
ctx.moveTo(x + yOffset, y - xOffset); ctx.lineTo(x + xOffsetW, y + yOffset);
ctx.lineTo(x - yOffset, y + xOffset); ctx.moveTo(x + yOffsetW, y - xOffset);
ctx.lineTo(x - yOffsetW, y + xOffset);
break; break;
case 'line': case 'line':
xOffset = w ? w / 2 : Math.cos(rad) * radius; xOffset = w ? w / 2 : Math.cos(rad) * radius;
@ -243,7 +254,7 @@ export function drawPointLegend(ctx, options, x, y, w) {
break; break;
case 'dash': case 'dash':
ctx.moveTo(x, y); ctx.moveTo(x, y);
ctx.lineTo(x + Math.cos(rad) * radius, y + Math.sin(rad) * radius); ctx.lineTo(x + Math.cos(rad) * (w ? w / 2 : radius), y + Math.sin(rad) * radius);
break; break;
} }

111
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.json vendored Normal file
View File

@ -0,0 +1,111 @@
{
"config": {
"type": "line",
"data": {
"labels": ["A", "B", "C"],
"datasets": [{
"data": [10, 10, 10],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "line"
},
{
"data": [15, 15, 15],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "triangle"
},
{
"data": [20, 20, 20],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rectRounded"
},
{
"data": [30, 30, 30],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": ""
},
{
"data": [40, 40, 40],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rect"
},
{
"data": [25, 25, 25],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rectRot"
},
{
"data": [35, 35, 35],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "crossRot"
},
{
"data": [45, 45, 45],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "cross"
},
{
"data": [50, 50, 50],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "star"
},
{
"data": [55, 55, 55],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "dash"
}]
},
"options": {
"plugins": {
"legend": {
"display": true,
"labels": {
"usePointStyle": true
}
}
},
"scales": {
"x": {
"display": false
},
"y": {
"display": false
}
}
}
},
"options": {
"canvas": {
"height": 512,
"width": 1024
}
}
}

BIN
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

112
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json vendored Normal file
View File

@ -0,0 +1,112 @@
{
"config": {
"type": "line",
"data": {
"labels": ["A", "B", "C"],
"datasets": [{
"data": [10, 10, 10],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "line"
},
{
"data": [15, 15, 15],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "triangle"
},
{
"data": [20, 20, 20],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rectRounded"
},
{
"data": [30, 30, 30],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": ""
},
{
"data": [40, 40, 40],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rect"
},
{
"data": [25, 25, 25],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "rectRot"
},
{
"data": [35, 35, 35],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "crossRot"
},
{
"data": [45, 45, 45],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "cross"
},
{
"data": [50, 50, 50],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "star"
},
{
"data": [55, 55, 55],
"backgroundColor": "#00ff00",
"borderColor": "#ff0000",
"borderWidth": 1,
"label": "",
"pointStyle": "dash"
}]
},
"options": {
"plugins": {
"legend": {
"display": true,
"labels": {
"usePointStyle": true,
"pointStyleWidth": 75
}
}
},
"scales": {
"x": {
"display": false
},
"y": {
"display": false
}
}
}
},
"options": {
"canvas": {
"height": 512,
"width": 1024
}
}
}

BIN
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB