mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 04:39:06 +02:00
Merge pull request #2694 from chartjs/fix/2689
Add a way to know when a resize occurs.
This commit is contained in:
commit
964009b3b3
@ -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
|
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
|
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.
|
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
|
### Title Configuration
|
||||||
|
|
||||||
|
@ -381,6 +381,9 @@ Plugins will be called at the following times
|
|||||||
* End of update (before render occurs)
|
* End of update (before render occurs)
|
||||||
* Start of draw
|
* Start of draw
|
||||||
* End of draw
|
* End of draw
|
||||||
|
* Before datasets draw
|
||||||
|
* After datasets draw
|
||||||
|
* Resize
|
||||||
* Before an animation is started
|
* Before an animation is started
|
||||||
|
|
||||||
Plugins should derive from Chart.PluginBase and implement the following interface
|
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) { },
|
beforeInit: function(chartInstance) { },
|
||||||
afterInit: function(chartInstance) { },
|
afterInit: function(chartInstance) { },
|
||||||
|
|
||||||
|
resize: function(chartInstance, newChartSize) { },
|
||||||
|
|
||||||
beforeUpdate: function(chartInstance) { },
|
beforeUpdate: function(chartInstance) { },
|
||||||
afterScaleUpdate: function(chartInstance) { }
|
afterScaleUpdate: function(chartInstance) { }
|
||||||
afterUpdate: function(chartInstance) { },
|
afterUpdate: function(chartInstance) { },
|
||||||
|
@ -76,26 +76,39 @@ module.exports = function(Chart) {
|
|||||||
},
|
},
|
||||||
|
|
||||||
resize: function resize(silent) {
|
resize: function resize(silent) {
|
||||||
var canvas = this.chart.canvas;
|
var me = this;
|
||||||
var newWidth = helpers.getMaximumWidth(this.chart.canvas);
|
var chart = me.chart;
|
||||||
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 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)
|
if (!sizeChanged) {
|
||||||
return this;
|
return me;
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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() {
|
ensureScalesHaveIDs: function ensureScalesHaveIDs() {
|
||||||
|
Loading…
Reference in New Issue
Block a user