Proposed fix for issue #6830 (#6884)

* proposed fix for issue #6830 https://github.com/chartjs/Chart.js/issues/6830

* Updated to pass the full options object instead of a shadow borderwidth. Updated migration guide regarding the API signature change.

* Moved to use options.radius instead of caching radius; updated related migration docs.
This commit is contained in:
Marc Silverman 2020-01-15 14:13:36 -08:00 committed by Evert Timberg
parent 02279b38fc
commit b834517378
4 changed files with 19 additions and 8 deletions

View File

@ -199,3 +199,10 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
#### Layout
* `ILayoutItem.update` no longer has a return value
#### Helpers
##### Canvas Helper
* The second parameter to `drawPoint` is now the full options object, so `style`, `rotation`, and `radius` are no longer passed explicitly

View File

@ -64,9 +64,8 @@ class Point extends Element {
draw(ctx, chartArea) {
const me = this;
const options = me.options;
const radius = options.radius;
if (me.skip || radius <= 0) {
if (me.skip || options.radius <= 0) {
return;
}
@ -75,7 +74,7 @@ class Point extends Element {
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.fillStyle = options.backgroundColor;
helpers.canvas.drawPoint(ctx, options.pointStyle, radius, me.x, me.y, options.rotation);
helpers.canvas.drawPoint(ctx, options, me.x, me.y);
}
}
}

View File

@ -32,8 +32,11 @@ export function clear(chart) {
chart.ctx.clearRect(0, 0, chart.width, chart.height);
}
export function drawPoint(ctx, style, radius, x, y, rotation) {
export function drawPoint(ctx, options, x, y) {
var type, xOffset, yOffset, size, cornerRadius;
var style = options.pointStyle;
var rotation = options.rotation;
var radius = options.radius;
var rad = (rotation || 0) * RAD_PER_DEG;
if (style && typeof style === 'object') {
@ -142,7 +145,9 @@ export function drawPoint(ctx, style, radius, x, y, rotation) {
}
ctx.fill();
ctx.stroke();
if (options.borderWidth > 0) {
ctx.stroke();
}
}
/**

View File

@ -45,7 +45,7 @@
],
"backgroundColor": "transparent",
"borderColor": "#0000ff",
"borderWidth": 0,
"borderWidth": 1,
"pointStyle": [
"circle",
"cross",
@ -73,7 +73,7 @@
],
"backgroundColor": "#00ff00",
"borderColor": "#0000ff",
"borderWidth": 0,
"borderWidth": 1,
"pointStyle": [
"circle",
"cross",
@ -103,7 +103,7 @@
"elements": {
"line": {
"borderColor": "transparent",
"borderWidth": 0,
"borderWidth": 1,
"fill": false
},
"point": {