From: Tanner Linsley Date: Wed, 3 Jun 2015 18:05:04 +0000 (-0600) Subject: Radar Chart skipNull & bezier fixes X-Git-Tag: v2.0-alpha~2^2~17 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7e791e02f2bf4527090c81d21e83a5faf449c4a0;p=thirdparty%2FChart.js.git Radar Chart skipNull & bezier fixes --- diff --git a/samples/radar.html b/samples/radar.html index 4a5c3f05b..199791904 100644 --- a/samples/radar.html +++ b/samples/radar.html @@ -27,14 +27,14 @@ label: "My First dataset", backgroundColor: "rgba(220,220,220,0.2)", pointBackgroundColor: "rgba(220,220,220,1)", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] + data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }, { label: "My Second dataset", backgroundColor: "rgba(151,187,205,0.2)", pointBackgroundColor: "rgba(151,187,205,1)", hoverPointBackgroundColor: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", - data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] + data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }] }, options: { diff --git a/src/Chart.Core.js b/src/Chart.Core.js index 221086b76..3e5304d29 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1274,32 +1274,32 @@ // Draw the background first (so the border is always on top) helpers.each(this._children, function(point, index) { - var scaleZero = point._yScale.getPointPixelForValue(0); + var previous = this.previousPoint(point, this._children, index); + var next = this.nextPoint(point, this._children, index); // First point only if (index === 0) { - if (point._view.skip && vm.skipNull) { - ctx.moveTo(point._view.x, scaleZero); - } else { - ctx.moveTo(point._view.x, point._view.y); - } + ctx.moveTo(point._view.x, point._view.y); return; } // Start Skip and drag along scale baseline - if (point._view.skip && vm.skipNull) { - ctx.lineTo(this.previousPoint(point, this._children, index)._view.x, scaleZero); - ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero); + if (point._view.skip && vm.skipNull && !this._loop) { + ctx.lineTo(previous._view.x, point._view.y); + ctx.moveTo(next._view.x, point._view.y); } // End Skip Stright line from the base line - else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) { - ctx.moveTo(point._view.x, scaleZero); + else if (previous._view.skip && vm.skipNull && !this._loop) { + ctx.moveTo(point._view.x, previous._view.y); ctx.lineTo(point._view.x, point._view.y); } + + if (previous._view.skip && vm.skipNull) { + ctx.moveTo(point._view.x, point._view.y); + } // Normal Bezier Curve else { - if (vm._tension > 0 || 1) { - var previous = this.previousPoint(point, this._children, index); + if (vm.tension > 0) { ctx.bezierCurveTo( previous._view.controlPointNextX, previous._view.controlPointNextY, @@ -1315,8 +1315,8 @@ }, this); // For radial scales, loop back around to the first point - if (vm.loop) { - if (vm._tension > 0 || 1) { + if (this._loop) { + if (vm.tension > 0 && !first._view.skip) { ctx.bezierCurveTo( last._view.controlPointNextX, @@ -1348,46 +1348,49 @@ ctx.beginPath(); helpers.each(this._children, function(point, index) { - var scaleZero = point._yScale.getPointPixelForValue(0); + var previous = this.previousPoint(point, this._children, index); + var next = this.nextPoint(point, this._children, index); + // First point only if (index === 0) { - if (point._view.skip && vm.skipNull) { - ctx.moveTo(point._view.x, scaleZero); - } else { - ctx.moveTo(point._view.x, point._view.y); - } + ctx.moveTo(point._view.x, point._view.y); return; } // Start Skip and drag along scale baseline - if (point._view.skip && vm.skipNull) { - ctx.moveTo(this.previousPoint(point, this._children, index)._view.x, scaleZero); - ctx.moveTo(this.nextPoint(point, this._children, index)._view.x, scaleZero); + if (point._view.skip && vm.skipNull && !this._loop) { + ctx.moveTo(previous._view.x, point._view.y); + ctx.moveTo(next._view.x, point._view.y); + return; } // End Skip Stright line from the base line - else if (this.previousPoint(point, this._children, index)._view.skip && vm.skipNull) { - ctx.moveTo(point._view.x, scaleZero); + if (previous._view.skip && vm.skipNull && !this._loop) { + ctx.moveTo(point._view.x, previous._view.y); + ctx.moveTo(point._view.x, point._view.y); + return; + } + + if (previous._view.skip && vm.skipNull) { ctx.moveTo(point._view.x, point._view.y); + return; } // Normal Bezier Curve - else { - if (vm._tension > 0 || 1) { - var previous = this.previousPoint(point, this._children, index); - ctx.bezierCurveTo( - previous._view.controlPointNextX, - previous._view.controlPointNextY, - point._view.controlPointPreviousX, - point._view.controlPointPreviousY, - point._view.x, - point._view.y - ); - } else { - ctx.lineTo(point._view.x, point._view.y); - } + if (vm.tension > 0) { + ctx.bezierCurveTo( + previous._view.controlPointNextX, + previous._view.controlPointNextY, + point._view.controlPointPreviousX, + point._view.controlPointPreviousY, + point._view.x, + point._view.y + ); + } else { + ctx.lineTo(point._view.x, point._view.y); } }, this); - if (vm.loop) { - if (vm._tension > 0 || 1) { + + if (this._loop && !first._view.skip) { + if (vm.tension > 0) { ctx.bezierCurveTo( last._view.controlPointNextX, @@ -1406,15 +1409,17 @@ ctx.stroke(); }, - previousPoint: function(point, collection, index) { - return helpers.findPreviousWhere(collection, function() { - return true; - }, index) || point; - }, nextPoint: function(point, collection, index) { - return helpers.findNextWhere(collection, function() { - return true; - }, index) || point; + if (this.loop) { + return collection[index + 1] || collection[0]; + } + return collection[index + 1] || collection[collection.length - 1]; + }, + previousPoint: function(point, collection, index) { + if (this.loop) { + return collection[index - 1] || collection[collection.length - 1]; + } + return collection[index - 1] || collection[0]; }, }); diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js index dffaa2a47..b8f0436b5 100644 --- a/src/Chart.Radar.js +++ b/src/Chart.Radar.js @@ -95,7 +95,7 @@ _chart: this.chart, _datasetIndex: datasetIndex, _points: dataset.metaData, - loop: true, + _loop: true }); dataset.metaData = []; @@ -134,12 +134,13 @@ this.update(); }, nextPoint: function(collection, index) { - return collection[index + 1] || collection[collection.length - 1]; + return collection[index + 1] || collection[0]; }, previousPoint: function(collection, index) { - return collection[index - 1] || collection[0]; + return collection[index - 1] || collection[collection.length - 1]; }, resetElements: function() { + // Update the points this.eachElement(function(point, index, dataset, datasetIndex) { helpers.extend(point, { @@ -147,6 +148,7 @@ _chart: this.chart, _datasetIndex: datasetIndex, _index: index, + _scale: this.scale, // Desired view properties _model: { @@ -176,28 +178,10 @@ point._model.tension ); - point._model.controlPointPreviousX = controlPoints.previous.x; - point._model.controlPointNextX = controlPoints.next.x; - - // Prevent the bezier going outside of the bounds of the graph - - // Cap puter bezier handles to the upper/lower scale bounds - if (controlPoints.next.y > this.chartArea.bottom) { - point._model.controlPointNextY = this.chartArea.bottom; - } else if (controlPoints.next.y < this.chartArea.top) { - point._model.controlPointNextY = this.chartArea.top; - } else { - point._model.controlPointNextY = controlPoints.next.y; - } - - // Cap inner bezier handles to the upper/lower scale bounds - if (controlPoints.previous.y > this.chartArea.bottom) { - point._model.controlPointPreviousY = this.chartArea.bottom; - } else if (controlPoints.previous.y < this.chartArea.top) { - point._model.controlPointPreviousY = this.chartArea.top; - } else { - point._model.controlPointPreviousY = controlPoints.previous.y; - } + point._model.controlPointPreviousX = this.scale.xCenter; + point._model.controlPointPreviousY = this.scale.yCenter; + point._model.controlPointNextX = this.scale.xCenter; + point._model.controlPointNextY = this.scale.yCenter; // Now pivot the point for animation point.pivot(); @@ -211,10 +195,10 @@ helpers.extend(dataset.metaDataset, { // Utility _datasetIndex: datasetIndex, - + // Data _children: dataset.metaData, - + // Model _model: { // Appearance @@ -225,7 +209,7 @@ fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull, drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull, - + // Scale scaleTop: this.scale.top, scaleBottom: this.scale.bottom, @@ -351,9 +335,7 @@ this.clear(); // Draw all the scales - helpers.each(this.scales, function(scale) { - scale.draw(this.chartArea); - }, this); + this.scale.draw(this.chartArea); // reverse for-loop for proper stacking for (var i = this.data.datasets.length - 1; i >= 0; i--) {