123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-chart-axis-Time'>/**
- </span> * A type of axis whose units are measured in time values. Use this axis
- * for listing dates that you will want to group or dynamically change.
- * If you just want to display dates as categories then use the
- * Category class for axis instead.
- *
- * For example:
- *
- * axes: [{
- * type: 'Time',
- * position: 'bottom',
- * fields: 'date',
- * title: 'Day',
- * dateFormat: 'M d',
- *
- * constrain: true,
- * fromDate: new Date('1/1/11'),
- * toDate: new Date('1/7/11')
- * }]
- *
- * In this example we're creating a time axis that has as title *Day*.
- * The field the axis is bound to is `date`.
- * The date format to use to display the text for the axis labels is `M d`
- * which is a three letter month abbreviation followed by the day number.
- * The time axis will show values for dates between `fromDate` and `toDate`.
- * Since `constrain` is set to true all other values for other dates not between
- * the fromDate and toDate will not be displayed.
- *
- */
- Ext.define('Ext.chart.axis.Time', {
- /* Begin Definitions */
- extend: 'Ext.chart.axis.Numeric',
- alternateClassName: 'Ext.chart.TimeAxis',
- alias: 'axis.time',
- uses: ['Ext.data.Store'],
- /* End Definitions */
- <span id='Ext-chart-axis-Time-cfg-dateFormat'> /**
- </span> * @cfg {String/Boolean} dateFormat
- * Indicates the format the date will be rendered on.
- * For example: 'M d' will render the dates as 'Jan 30', etc.
- * For a list of possible format strings see {@link Ext.Date Date}
- */
- dateFormat: false,
- <span id='Ext-chart-axis-Time-cfg-fromDate'> /**
- </span> * @cfg {Date} fromDate The starting date for the time axis.
- */
- fromDate: false,
- <span id='Ext-chart-axis-Time-cfg-toDate'> /**
- </span> * @cfg {Date} toDate The ending date for the time axis.
- */
- toDate: false,
- <span id='Ext-chart-axis-Time-cfg-step'> /**
- </span> * @cfg {Array/Boolean} step
- * 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.).
- *
- * Defaults to: [Ext.Date.DAY, 1].
- */
- step: [Ext.Date.DAY, 1],
- <span id='Ext-chart-axis-Time-cfg-constrain'> /**
- </span> * @cfg {Boolean} constrain
- * If true, the values of the chart will be rendered only if they belong between the fromDate and toDate.
- * If false, the time axis will adapt to the new values by adding/removing steps.
- */
- constrain: false,
- constructor: function (config) {
- var me = this, label, f, df;
- me.callParent([config]);
- label = me.label || {};
- df = this.dateFormat;
- if (df) {
- if (label.renderer) {
- f = label.renderer;
- label.renderer = function(v) {
- v = f(v);
- return Ext.Date.format(new Date(f(v)), df);
- };
- } else {
- label.renderer = function(v) {
- return Ext.Date.format(new Date(v >> 0), df);
- };
- }
- }
- },
- // Before rendering, set current default step count to be number of records.
- processView: function () {
- var me = this;
- if (me.fromDate) {
- me.minimum = +me.fromDate;
- }
- if (me.toDate) {
- me.maximum = +me.toDate;
- }
- if(me.constrain){
- me.doConstrain();
- }
- },
- // @private modifies the store and creates the labels for the axes.
- calcEnds: function() {
- var me = this, range, step = me.step;
- if (step) {
- range = me.getRange();
- range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step]: step);
- if (me.minimum) {
- range.from = me.minimum;
- }
- if (me.maximum) {
- range.to = me.maximum;
- }
- range.step = (range.to - range.from) / range.steps;
- return range;
- } else {
- return me.callParent(arguments);
- }
- }
- });
- </pre>
- </body>
- </html>
|