mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 04:09:08 +02:00
enable pointStyleWidth for all legend style (#10639)
This commit is contained in:
parent
eee1bf257b
commit
0edb2ac604
@ -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.
|
||||||
|
|
||||||
|
@ -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
111
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.json
vendored
Normal 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
BIN
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
112
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json
vendored
Normal file
112
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json
vendored
Normal 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
BIN
test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
Loading…
Reference in New Issue
Block a user