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