Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2694 from chartjs/fix/2689

Browse Source 
Add a way to know when a resize occurs.
This commit is contained in:
Evert Timberg 2016-06-03 18:27:26 -04:00
commit 964009b3b3
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/01-Chart-Configuration.md
View File

@ -72,6 +72,7 @@ maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio
events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | Events that the chart should listen to for tooltips and hovering
onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements
legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
onResize | Function | null | Called when a resize occurs. Gets passed two arguemnts: the chart instance and the new size.
### Title Configuration

5
docs/09-Advanced.md
View File

@ -381,6 +381,9 @@ Plugins will be called at the following times
* End of update (before render occurs)
* Start of draw
* End of draw
* Before datasets draw
* After datasets draw
* Resize
* Before an animation is started
Plugins should derive from Chart.PluginBase and implement the following interface
@ -389,6 +392,8 @@ Plugins should derive from Chart.PluginBase and implement the following interfac
beforeInit: function(chartInstance) { },
afterInit: function(chartInstance) { },
resize: function(chartInstance, newChartSize) { },
beforeUpdate: function(chartInstance) { },
afterScaleUpdate: function(chartInstance) { }
afterUpdate: function(chartInstance) { },

45
src/core/core.controller.js
View File

@ -76,26 +76,39 @@ module.exports = function(Chart) {
},
resize: function resize(silent) {
var canvas = this.chart.canvas;
var newWidth = helpers.getMaximumWidth(this.chart.canvas);
var newHeight = (this.options.maintainAspectRatio && isNaN(this.chart.aspectRatio) === false && isFinite(this.chart.aspectRatio) && this.chart.aspectRatio !== 0) ? newWidth / this.chart.aspectRatio : helpers.getMaximumHeight(this.chart.canvas);
var me = this;
var chart = me.chart;
var canvas = chart.canvas;
var newWidth = helpers.getMaximumWidth(canvas);
var aspectRatio = chart.aspectRatio;
var newHeight = (me.options.maintainAspectRatio && isNaN(aspectRatio) === false && isFinite(aspectRatio) && aspectRatio !== 0) ? newWidth / aspectRatio : helpers.getMaximumHeight(canvas);
var sizeChanged = this.chart.width !== newWidth || this.chart.height !== newHeight;
var sizeChanged = chart.width !== newWidth || chart.height !== newHeight;
if (!sizeChanged)
return this;
canvas.width = this.chart.width = newWidth;
canvas.height = this.chart.height = newHeight;
helpers.retinaScale(this.chart);
if (!silent) {
this.stop();
this.update(this.options.responsiveAnimationDuration);
if (!sizeChanged) {
return me;
}
return this;
canvas.width = chart.width = newWidth;
canvas.height = chart.height = newHeight;
helpers.retinaScale(chart);
// Notify any plugins about the resize
var newSize = { width: newWidth, height: newHeight };
Chart.pluginService.notifyPlugins('resize', [me, newSize]);
// Notify of resize
if (me.options.onResize) {
me.options.onResize(me, newSize);
}
if (!silent) {
me.stop();
me.update(me.options.responsiveAnimationDuration);
}
return me;
},
ensureScalesHaveIDs: function ensureScalesHaveIDs() {