/** * @class Ext.chart.interactions.PanZoom * @extend Ext.chart.interactions.Abstract * @alias interaction.panzoom * * The PanZoom interaction allows the user to navigate the data for one or more chart * axes by panning and/or zooming. Navigation can be limited to particular axes. Zooming is * performed by pinching on the chart or axis area; panning is performed by single-touch dragging. * The interaction only works with cartesian charts/series. * * For devices which do not support multiple-touch events, zooming can not be done via pinch gestures; in this case the * interaction will allow the user to perform both zooming and panning using the same single-touch drag gesture. * {@link #modeToggleButton} provides a button to indicate and toggle between two modes. * * @example * Ext.create({ * renderTo: document.body, * xtype: 'cartesian', * width: 600, * height: 400, * insetPadding: 40, * interactions: [{ * type: 'panzoom', * zoomOnPan: true * }], * store: { * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], * data: [{ * 'name': 'metric one', * 'data1': 10, * 'data2': 12, * 'data3': 14, * 'data4': 8, * 'data5': 13 * }, { * 'name': 'metric two', * 'data1': 7, * 'data2': 8, * 'data3': 16, * 'data4': 10, * 'data5': 3 * }, { * 'name': 'metric three', * 'data1': 5, * 'data2': 2, * 'data3': 14, * 'data4': 12, * 'data5': 7 * }, { * 'name': 'metric four', * 'data1': 2, * 'data2': 14, * 'data3': 6, * 'data4': 1, * 'data5': 23 * }, { * 'name': 'metric five', * 'data1': 27, * 'data2': 38, * 'data3': 36, * 'data4': 13, * 'data5': 33 * }] * }, * axes: [{ * type: 'numeric', * position: 'left', * fields: ['data1'], * title: { * text: 'Sample Values', * fontSize: 15 * }, * grid: true, * minimum: 0 * }, { * type: 'category', * position: 'bottom', * fields: ['name'], * title: { * text: 'Sample Values', * fontSize: 15 * } * }], * series: [{ * type: 'line', * highlight: { * size: 7, * radius: 7 * }, * style: { * stroke: 'rgb(143,203,203)' * }, * xField: 'name', * yField: 'data1', * marker: { * type: 'path', * path: ['M', - 2, 0, 0, 2, 2, 0, 0, - 2, 'Z'], * stroke: 'blue', * lineWidth: 0 * } * }, { * type: 'line', * highlight: { * size: 7, * radius: 7 * }, * fill: true, * xField: 'name', * yField: 'data3', * marker: { * type: 'circle', * radius: 4, * lineWidth: 0 * } * }] * }); * * The configuration object for the `panzoom` interaction type should specify which axes * will be made navigable via the `axes` config. See the {@link #axes} config documentation * for details on the allowed formats. If the `axes` config is not specified, it will default * to making all axes navigable with the default axis options. * */ /** * @cfg {Object/Array} axes * Specifies which axes should be made navigable. The config value can take the following formats: * * - An Object with keys corresponding to the {@link Ext.chart.axis.Axis#position position} of each * axis that should be made navigable. Each key's value can either be an Object with further * configuration options for each axis or simply `true` for a default set of options. * * { * type: 'panzoom', * axes: { * left: { * maxZoom: 5, * allowPan: false * }, * bottom: true * } * } * * If using the full Object form, the following options can be specified for each axis: * * - minZoom (Number) A minimum zoom level for the axis. Defaults to `1` which is its natural size. * - maxZoom (Number) A maximum zoom level for the axis. Defaults to `10`. * - startZoom (Number) A starting zoom level for the axis. Defaults to `1`. * - allowZoom (Boolean) Whether zooming is allowed for the axis. Defaults to `true`. * - allowPan (Boolean) Whether panning is allowed for the axis. Defaults to `true`. * - startPan (Boolean) A starting panning offset for the axis. Defaults to `0`. * * - An Array of strings, each one corresponding to the {@link Ext.chart.axis.Axis#position position} * of an axis that should be made navigable. The default options will be used for each named axis. * * { * type: 'panzoom', * axes: ['left', 'bottom'] * } * * If the `axes` config is not specified, it will default to making all axes navigable with the * default axis options. * @accessor */ /** * @cfg {Boolean} [showOverflowArrows=true] * If `true`, arrows will be conditionally shown at either end of each axis to indicate that the * axis is overflowing and can therefore be panned in that direction. Set this to `false` to * prevent the arrows from being displayed. * @accessor */ /** * @cfg {Object} overflowArrowOptions * A set of optional overrides for the overflow arrow sprites' options. Only relevant when * {@link #showOverflowArrows} is `true`. */ /** * @cfg {Boolean} [zoomOnPan=false] * If `true`, the pan gesture will zoom the chart. */ /** * @cfg {Boolean} [doubleTapReset=false] * If `true`, the double tap on a chart will reset the current pan/zoom to show the whole chart. */