Time.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  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-axis-Time'>/**
  19. </span> * A type of axis whose units are measured in time values. Use this axis
  20. * for listing dates that you will want to group or dynamically change.
  21. * If you just want to display dates as categories then use the
  22. * Category class for axis instead.
  23. *
  24. * For example:
  25. *
  26. * axes: [{
  27. * type: 'Time',
  28. * position: 'bottom',
  29. * fields: 'date',
  30. * title: 'Day',
  31. * dateFormat: 'M d',
  32. *
  33. * constrain: true,
  34. * fromDate: new Date('1/1/11'),
  35. * toDate: new Date('1/7/11')
  36. * }]
  37. *
  38. * In this example we're creating a time axis that has as title *Day*.
  39. * The field the axis is bound to is `date`.
  40. * The date format to use to display the text for the axis labels is `M d`
  41. * which is a three letter month abbreviation followed by the day number.
  42. * The time axis will show values for dates between `fromDate` and `toDate`.
  43. * Since `constrain` is set to true all other values for other dates not between
  44. * the fromDate and toDate will not be displayed.
  45. *
  46. */
  47. Ext.define('Ext.chart.axis.Time', {
  48. /* Begin Definitions */
  49. extend: 'Ext.chart.axis.Numeric',
  50. alternateClassName: 'Ext.chart.TimeAxis',
  51. alias: 'axis.time',
  52. uses: ['Ext.data.Store'],
  53. /* End Definitions */
  54. <span id='Ext-chart-axis-Time-cfg-dateFormat'> /**
  55. </span> * @cfg {String/Boolean} dateFormat
  56. * Indicates the format the date will be rendered on.
  57. * For example: 'M d' will render the dates as 'Jan 30', etc.
  58. * For a list of possible format strings see {@link Ext.Date Date}
  59. */
  60. dateFormat: false,
  61. <span id='Ext-chart-axis-Time-cfg-fromDate'> /**
  62. </span> * @cfg {Date} fromDate The starting date for the time axis.
  63. */
  64. fromDate: false,
  65. <span id='Ext-chart-axis-Time-cfg-toDate'> /**
  66. </span> * @cfg {Date} toDate The ending date for the time axis.
  67. */
  68. toDate: false,
  69. <span id='Ext-chart-axis-Time-cfg-step'> /**
  70. </span> * @cfg {Array/Boolean} step
  71. * An array with two components: The first is the unit of the step (day, month, year, etc). The second one is the number of units for the step (1, 2, etc.).
  72. *
  73. * Defaults to: [Ext.Date.DAY, 1].
  74. */
  75. step: [Ext.Date.DAY, 1],
  76. <span id='Ext-chart-axis-Time-cfg-constrain'> /**
  77. </span> * @cfg {Boolean} constrain
  78. * If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
  79. * If false, the time axis will adapt to the new values by adding/removing steps.
  80. */
  81. constrain: false,
  82. constructor: function (config) {
  83. var me = this, label, f, df;
  84. me.callParent([config]);
  85. label = me.label || {};
  86. df = this.dateFormat;
  87. if (df) {
  88. if (label.renderer) {
  89. f = label.renderer;
  90. label.renderer = function(v) {
  91. v = f(v);
  92. return Ext.Date.format(new Date(f(v)), df);
  93. };
  94. } else {
  95. label.renderer = function(v) {
  96. return Ext.Date.format(new Date(v &gt;&gt; 0), df);
  97. };
  98. }
  99. }
  100. },
  101. // Before rendering, set current default step count to be number of records.
  102. processView: function () {
  103. var me = this;
  104. if (me.fromDate) {
  105. me.minimum = +me.fromDate;
  106. }
  107. if (me.toDate) {
  108. me.maximum = +me.toDate;
  109. }
  110. if(me.constrain){
  111. me.doConstrain();
  112. }
  113. },
  114. // @private modifies the store and creates the labels for the axes.
  115. calcEnds: function() {
  116. var me = this, range, step = me.step;
  117. if (step) {
  118. range = me.getRange();
  119. range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
  120. if (me.minimum) {
  121. range.from = me.minimum;
  122. }
  123. if (me.maximum) {
  124. range.to = me.maximum;
  125. }
  126. range.step = (range.to - range.from) / range.steps;
  127. return range;
  128. } else {
  129. return me.callParent(arguments);
  130. }
  131. }
  132. });
  133. </pre>
  134. </body>
  135. </html>