Navigation.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-chart-Navigation'>/**
  19. </span> * @class Ext.chart.Navigation
  20. *
  21. * Handles panning and zooming capabilities.
  22. *
  23. * Used as mixin by Ext.chart.Chart.
  24. */
  25. Ext.define('Ext.chart.Navigation', {
  26. constructor: function() {
  27. this.originalStore = this.store;
  28. },
  29. <span id='Ext-chart-Navigation-method-setZoom'> /**
  30. </span> * Zooms the chart to the specified selection range.
  31. * Can be used with a selection mask. For example:
  32. *
  33. * items: {
  34. * xtype: 'chart',
  35. * animate: true,
  36. * store: store1,
  37. * mask: 'horizontal',
  38. * listeners: {
  39. * select: {
  40. * fn: function(me, selection) {
  41. * me.setZoom(selection);
  42. * me.mask.hide();
  43. * }
  44. * }
  45. * }
  46. * }
  47. */
  48. setZoom: function(zoomConfig) {
  49. var me = this,
  50. axes = me.axes,
  51. axesItems = axes.items,
  52. i, ln, axis,
  53. bbox = me.chartBBox,
  54. xScale = 1 / bbox.width,
  55. yScale = 1 / bbox.height,
  56. zoomer = {
  57. x : zoomConfig.x * xScale,
  58. y : zoomConfig.y * yScale,
  59. width : zoomConfig.width * xScale,
  60. height : zoomConfig.height * yScale
  61. },
  62. ends, from, to;
  63. for (i = 0, ln = axesItems.length; i &lt; ln; i++) {
  64. axis = axesItems[i];
  65. ends = axis.calcEnds();
  66. if (axis.position == 'bottom' || axis.position == 'top') {
  67. from = (ends.to - ends.from) * zoomer.x + ends.from;
  68. to = (ends.to - ends.from) * zoomer.width + from;
  69. axis.minimum = from;
  70. axis.maximum = to;
  71. } else {
  72. to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from;
  73. from = to - (ends.to - ends.from) * zoomer.height;
  74. axis.minimum = from;
  75. axis.maximum = to;
  76. }
  77. }
  78. me.redraw(false);
  79. },
  80. <span id='Ext-chart-Navigation-method-restoreZoom'> /**
  81. </span> * Restores the zoom to the original value. This can be used to reset
  82. * the previous zoom state set by `setZoom`. For example:
  83. *
  84. * myChart.restoreZoom();
  85. */
  86. restoreZoom: function() {
  87. if (this.originalStore) {
  88. this.store = this.substore = this.originalStore;
  89. this.redraw(true);
  90. }
  91. }
  92. });
  93. </pre>
  94. </body>
  95. </html>