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-Category'>/**
- </span> * @class Ext.chart.axis.Category
- *
- * A type of axis that displays items in categories. This axis is generally used to
- * display categorical information like names of items, month names, quarters, etc.
- * but no quantitative values. For that other type of information `Number`
- * axis are more suitable.
- *
- * As with other axis you can set the position of the axis and its title. For example:
- *
- * @example
- * var store = Ext.create('Ext.data.JsonStore', {
- * 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}
- * ]
- * });
- *
- * Ext.create('Ext.chart.Chart', {
- * renderTo: Ext.getBody(),
- * width: 500,
- * height: 300,
- * store: store,
- * axes: [{
- * type: 'Numeric',
- * position: 'left',
- * fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
- * title: 'Sample Values',
- * grid: {
- * odd: {
- * opacity: 1,
- * fill: '#ddd',
- * stroke: '#bbb',
- * 'stroke-width': 1
- * }
- * },
- * minimum: 0,
- * adjustMinimumByMajorUnit: 0
- * }, {
- * type: 'Category',
- * position: 'bottom',
- * fields: ['name'],
- * title: 'Sample Metrics',
- * grid: true,
- * label: {
- * rotate: {
- * degrees: 315
- * }
- * }
- * }],
- * series: [{
- * type: 'area',
- * highlight: false,
- * axis: 'left',
- * xField: 'name',
- * yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
- * style: {
- * opacity: 0.93
- * }
- * }]
- * });
- *
- * In this example with set the category axis to the bottom of the surface, bound the axis to
- * the `name` property and set as title _Month of the Year_.
- */
- Ext.define('Ext.chart.axis.Category', {
- /* Begin Definitions */
- extend: 'Ext.chart.axis.Axis',
- alternateClassName: 'Ext.chart.CategoryAxis',
- alias: 'axis.category',
- /* End Definitions */
- <span id='Ext-chart-axis-Category-property-categoryNames'> /**
- </span> * A list of category names to display along this axis.
- * @property {String} categoryNames
- */
- categoryNames: null,
- <span id='Ext-chart-axis-Category-property-calculateCategoryCount'> /**
- </span> * Indicates whether or not to calculate the number of categories (ticks and
- * labels) when there is not enough room to display all labels on the axis.
- * If set to true, the axis will determine the number of categories to plot.
- * If not, all categories will be plotted.
- *
- * @property calculateCategoryCount
- * @type Boolean
- */
- calculateCategoryCount: false,
- // @private creates an array of labels to be used when rendering.
- setLabels: function() {
- var store = this.chart.getChartStore(),
- data = store.data.items,
- d, dLen, record,
- fields = this.fields,
- ln = fields.length,
- i;
- this.labels = [];
- for (d = 0, dLen = data.length; d < dLen; d++) {
- record = data[d];
- for (i = 0; i < ln; i++) {
- this.labels.push(record.get(fields[i]));
- }
- }
- },
- // @private calculates labels positions and marker positions for rendering.
- applyData: function() {
- this.callParent();
- this.setLabels();
- var count = this.chart.getChartStore().getCount();
- return {
- from: 0,
- to: count - 1,
- power: 1,
- step: 1,
- steps: count - 1
- };
- }
- });
- </pre>
- </body>
- </html>
|