archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Support boundary filling modes in radialLinear scale (#6281)

Browse Source
This commit is contained in:
Akihiko Kusanagi 2019-05-21 17:15:33 +08:00 committed by Simon Brunel
parent 7d8526f691
commit cfcdcccc32
22 changed files with 450 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/plugins/plugin.filler.js
View File

@ -37,6 +37,12 @@ var mappers = {
var x = boundary ? boundary.x : null;
var y = boundary ? boundary.y : null;
if (helpers.isArray(boundary)) {
return function(point, i) {
return boundary[i];
};
}
return function(point) {
return {
x: x === null ? point.x : x,
@ -96,7 +102,7 @@ function decodeFill(el, index, count) {
}
}
function computeBoundary(source) {
function computeLinearBoundary(source) {
var model = source.el._model || {};
var scale = source.el._scale || {};
var fill = source.fill;
@ -117,8 +123,6 @@ function computeBoundary(source) {
target = model.scaleTop === undefined ? scale.top : model.scaleTop;
} else if (model.scaleZero !== undefined) {
target = model.scaleZero;
} else if (scale.getBasePosition) {
target = scale.getBasePosition();
} else if (scale.getBasePixel) {
target = scale.getBasePixel();
}
@ -140,6 +144,44 @@ function computeBoundary(source) {
return null;
}
function computeCircularBoundary(source) {
var scale = source.el._scale;
var options = scale.options;
var length = scale.chart.data.labels.length;
var fill = source.fill;
var target = [];
var start, end, center, i, point;
if (!length) {
return null;
}
start = options.ticks.reverse ? scale.max : scale.min;
end = options.ticks.reverse ? scale.min : scale.max;
center = scale.getPointPositionForValue(0, start);
for (i = 0; i < length; ++i) {
point = fill === 'start' || fill === 'end'
? scale.getPointPositionForValue(i, fill === 'start' ? start : end)
: scale.getBasePosition(i);
if (options.gridLines.circular) {
point.cx = center.x;
point.cy = center.y;
point.angle = scale.getIndexAngle(i) - Math.PI / 2;
}
target.push(point);
}
return target;
}
function computeBoundary(source) {
var scale = source.el._scale || {};
if (scale.getPointPositionForValue) {
return computeCircularBoundary(source);
}
return computeLinearBoundary(source);
}
function resolveTarget(sources, index, propagate) {
var source = sources[index];
var fill = source.fill;
@ -191,7 +233,7 @@ function isDrawable(point) {
}
function drawArea(ctx, curve0, curve1, len0, len1) {
var i;
var i, cx, cy, r;
if (!len0 || !len1) {
return;
@ -203,6 +245,16 @@ function drawArea(ctx, curve0, curve1, len0, len1) {
helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
}
if (curve1[0].angle !== undefined) {
cx = curve1[0].cx;
cy = curve1[0].cy;
r = Math.sqrt(Math.pow(curve1[0].x - cx, 2) + Math.pow(curve1[0].y - cy, 2));
for (i = len1 - 1; i > 0; --i) {
ctx.arc(cx, cy, r, curve1[i].angle, curve1[i - 1].angle, true);
}
return;
}
// joining the two area curves
ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);

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

@ -437,12 +437,12 @@ module.exports = LinearScaleBase.extend({
return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
},
getBasePosition: function() {
getBasePosition: function(index) {
var me = this;
var min = me.min;
var max = me.max;
return me.getPointPositionForValue(0,
return me.getPointPositionForValue(index || 0,
me.beginAtZero ? 0 :
min < 0 && max < 0 ? max :
min > 0 && max > 0 ? min :

47
test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json vendored Normal file
View File

@ -0,0 +1,47 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false,
"gridLines": {
"circular": true
}
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"fill": "end"
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-boundary-end-circular.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

44
test/fixtures/plugin.filler/fill-radar-boundary-end.json vendored Normal file
View File

@ -0,0 +1,44 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"fill": "end"
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-boundary-end.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

47
test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json vendored Normal file
View File

@ -0,0 +1,47 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false,
"gridLines": {
"circular": true
}
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"fill": "origin"
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

6
test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.json vendored
View File

@ -5,13 +5,13 @@
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": [null, null, 2, 4, 2, 1, -1, 1, 2]
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

BIN
test/fixtures/plugin.filler/fill-radar-boundary-origin-spline.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 16 KiB

6
test/fixtures/plugin.filler/fill-radar-boundary-origin.json vendored
View File

@ -5,13 +5,13 @@
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": [null, null, 2, 4, 2, 1, -1, 1, 2]
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]

BIN
test/fixtures/plugin.filler/fill-radar-boundary-origin.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

47
test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json vendored Normal file
View File

@ -0,0 +1,47 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false,
"gridLines": {
"circular": true
}
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"fill": "start"
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-boundary-start-circular.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

44
test/fixtures/plugin.filler/fill-radar-boundary-start.json vendored Normal file
View File

@ -0,0 +1,44 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(0, 0, 192, 0.25)",
"data": ["NaN", "NaN", 2, 4, 2, 1, -1, 1, 2]
}, {
"backgroundColor": "rgba(0, 192, 0, 0.25)",
"data": [4, 2, "NaN", 3, 2.5, "NaN", -2, 1.5, 3]
}, {
"backgroundColor": "rgba(192, 0, 0, 0.25)",
"data": [3.5, 2, 1, 2.5, -2, 3, -1, "NaN", "NaN"]
}, {
"backgroundColor": "rgba(128, 0, 128, 0.25)",
"data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"fill": "start"
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-boundary-start.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

53
test/fixtures/plugin.filler/fill-radar-dataset-border.json vendored Normal file
View File

@ -0,0 +1,53 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(255, 0, 0, 0.25)",
"data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0],
"fill": 1
}, {
"backgroundColor": "rgba(0, 255, 0, 0.25)",
"data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1],
"fill": "+1"
}, {
"backgroundColor": "rgba(0, 0, 255, 0.25)",
"data": [0, 2, 0, -2, 0, 2, 0],
"fill": 3
}, {
"backgroundColor": "rgba(255, 0, 255, 0.25)",
"data": [2, 0, -2, 0, 2, 0, -2, 0, 2],
"fill": "-2"
}, {
"backgroundColor": "rgba(255, 255, 0, 0.25)",
"data": [3, 1, -1, -3, -1, 1, 3, 1, -1],
"fill": "-1"
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "black",
"borderWidth": 5,
"tension": 0
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-dataset-border.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

52
test/fixtures/plugin.filler/fill-radar-dataset-spline.json vendored Normal file
View File

@ -0,0 +1,52 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(255, 0, 0, 0.25)",
"data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0],
"fill": 1
}, {
"backgroundColor": "rgba(0, 255, 0, 0.25)",
"data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1],
"fill": "+1"
}, {
"backgroundColor": "rgba(0, 0, 255, 0.25)",
"data": [0, 2, 0, -2, 0, 2, 0],
"fill": 3
}, {
"backgroundColor": "rgba(255, 0, 255, 0.25)",
"data": [2, 0, -2, 0, 2, 0, -2, 0, 2],
"fill": "-2"
}, {
"backgroundColor": "rgba(255, 255, 0, 0.25)",
"data": [3, 1, -1, -3, -1, 1, 3, 1, -1],
"fill": "-1"
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"tension": 0.5
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-dataset-spline.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

52
test/fixtures/plugin.filler/fill-radar-dataset.json vendored Normal file
View File

@ -0,0 +1,52 @@
{
"config": {
"type": "radar",
"data": {
"labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
"datasets": [{
"backgroundColor": "rgba(255, 0, 0, 0.25)",
"data": ["NaN", "NaN", 0, -1, 0, 1, 0, -1, 0],
"fill": 1
}, {
"backgroundColor": "rgba(0, 255, 0, 0.25)",
"data": [1, 0, "NaN", 1, 0, "NaN", -1, 0, 1],
"fill": "+1"
}, {
"backgroundColor": "rgba(0, 0, 255, 0.25)",
"data": [0, 2, 0, -2, 0, 2, 0],
"fill": 3
}, {
"backgroundColor": "rgba(255, 0, 255, 0.25)",
"data": [2, 0, -2, 0, 2, 0, -2, 0, 2],
"fill": "-2"
}, {
"backgroundColor": "rgba(255, 255, 0, 0.25)",
"data": [3, 1, -1, -3, -1, 1, 3, 1, -1],
"fill": "-1"
}]
},
"options": {
"responsive": false,
"legend": false,
"title": false,
"scale": {
"display": false
},
"elements": {
"point": {
"radius": 0
},
"line": {
"borderColor": "transparent",
"tension": 0
}
}
}
},
"options": {
"canvas": {
"height": 256,
"width": 256
}
}
}

BIN
test/fixtures/plugin.filler/fill-radar-dataset.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB