Implement clipping #3658
Implement clipping #3658
Conversation
| @@ -286,20 +286,23 @@ module.exports = function(Chart) { | |||
| var points = meta.data || []; | |||
| var easingDecimal = ease || 1; | |||
| var i, ilen; | |||
| var chartArea = me.chart.chartArea; | |||
|
|
|||
There was a problem hiding this comment.
Oops, I made a mistake a bit. this is no need.
|
|
||
| // Draw the points | ||
| for (i=0, ilen=points.length; i<ilen; ++i) { | ||
| points[i].draw(); | ||
| points[i].draw(chartArea); |
There was a problem hiding this comment.
points[i].draw(me.chart.chartArea);
| var errMarginPercent = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.) | ||
| var ratio = 0; | ||
| // going out from inner charArea? | ||
| if ((chartArea !== undefined)&&(isOutofChartArea(this._view, chartArea, errMarginPercent))&&(isOutofChartArea(this._model, chartArea, errMarginPercent))) { |
There was a problem hiding this comment.
I think you should only need to check this._model here. At the end of the animation this._view will have the same values as this._model
There was a problem hiding this comment.
Oh, you are right. Then no need var isOutofChartArea = function(... and the code will be shorter. Thank you.
| // going out from inner charArea? | ||
| if ((chartArea !== undefined)&&(isOutofChartArea(this._view, chartArea, errMarginPercent))&&(isOutofChartArea(this._model, chartArea, errMarginPercent))) { | ||
| // Point fade out | ||
| if (this._model.x < chartArea.left) { |
There was a problem hiding this comment.
If you capture this in a local variable, this will have better minification.
var me = this;
if (me._model.x < chartArea.left) {
...
}There was a problem hiding this comment.
Thank you for checking.
I will change. 😄
|
I changed the code. |
|
I updated jsfiddle with my new code. I tested it. I think there is OK. AfterBar and Linehttps://jsfiddle.net/KoyoSE/98x7ny4b/8/ Radar and Scatterhttps://jsfiddle.net/KoyoSE/7v3ehcqt/2/ OtherIt is building with chart.js of the current(02/Dec/2016) source code. |
Implements clipping of items outside the chart area. Resolves chartjs#3506 chartjs#3491 chartjs#2873
I tried implementing clipping chart area.
I would be pleased if you like it.
Resolves #3506, #3491, #2873
Bar and Line chart.
Before
https://jsfiddle.net/KoyoSE/n7ben0fx/
After
https://jsfiddle.net/KoyoSE/98x7ny4b/
(Note: jsfeddle takes time to execute.This is because I put the built chart.js in the html area.)
Line chart: The point fades out when going out.
Radar and Scatter chart.
Before
https://jsfiddle.net/KoyoSE/fwt4bxcc/
(Do Radar chart have to consider the drawing of the points below min?)
After
https://jsfiddle.net/KoyoSE/7v3ehcqt/
(Note: jsfeddle takes time to execute.This is because I put the built chart.js in the html area.)
Radar chart: It works the same before. Clipping is not done.
The Radar chart, the following error is displayed on the console.
'Unable to get property 'xAxes' of undefined or null reference'
This is solved by removing #3620.
Other
chart.js version v2.4.0