Category.html 5.0 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-Category'>/**
  19. </span> * @class Ext.chart.axis.Category
  20. *
  21. * A type of axis that displays items in categories. This axis is generally used to
  22. * display categorical information like names of items, month names, quarters, etc.
  23. * but no quantitative values. For that other type of information `Number`
  24. * axis are more suitable.
  25. *
  26. * As with other axis you can set the position of the axis and its title. For example:
  27. *
  28. * @example
  29. * var store = Ext.create('Ext.data.JsonStore', {
  30. * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  31. * data: [
  32. * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  33. * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  34. * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  35. * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  36. * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  37. * ]
  38. * });
  39. *
  40. * Ext.create('Ext.chart.Chart', {
  41. * renderTo: Ext.getBody(),
  42. * width: 500,
  43. * height: 300,
  44. * store: store,
  45. * axes: [{
  46. * type: 'Numeric',
  47. * position: 'left',
  48. * fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  49. * title: 'Sample Values',
  50. * grid: {
  51. * odd: {
  52. * opacity: 1,
  53. * fill: '#ddd',
  54. * stroke: '#bbb',
  55. * 'stroke-width': 1
  56. * }
  57. * },
  58. * minimum: 0,
  59. * adjustMinimumByMajorUnit: 0
  60. * }, {
  61. * type: 'Category',
  62. * position: 'bottom',
  63. * fields: ['name'],
  64. * title: 'Sample Metrics',
  65. * grid: true,
  66. * label: {
  67. * rotate: {
  68. * degrees: 315
  69. * }
  70. * }
  71. * }],
  72. * series: [{
  73. * type: 'area',
  74. * highlight: false,
  75. * axis: 'left',
  76. * xField: 'name',
  77. * yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  78. * style: {
  79. * opacity: 0.93
  80. * }
  81. * }]
  82. * });
  83. *
  84. * In this example with set the category axis to the bottom of the surface, bound the axis to
  85. * the `name` property and set as title _Month of the Year_.
  86. */
  87. Ext.define('Ext.chart.axis.Category', {
  88. /* Begin Definitions */
  89. extend: 'Ext.chart.axis.Axis',
  90. alternateClassName: 'Ext.chart.CategoryAxis',
  91. alias: 'axis.category',
  92. /* End Definitions */
  93. <span id='Ext-chart-axis-Category-property-categoryNames'> /**
  94. </span> * A list of category names to display along this axis.
  95. * @property {String} categoryNames
  96. */
  97. categoryNames: null,
  98. <span id='Ext-chart-axis-Category-property-calculateCategoryCount'> /**
  99. </span> * Indicates whether or not to calculate the number of categories (ticks and
  100. * labels) when there is not enough room to display all labels on the axis.
  101. * If set to true, the axis will determine the number of categories to plot.
  102. * If not, all categories will be plotted.
  103. *
  104. * @property calculateCategoryCount
  105. * @type Boolean
  106. */
  107. calculateCategoryCount: false,
  108. // @private creates an array of labels to be used when rendering.
  109. setLabels: function() {
  110. var store = this.chart.getChartStore(),
  111. data = store.data.items,
  112. d, dLen, record,
  113. fields = this.fields,
  114. ln = fields.length,
  115. i;
  116. this.labels = [];
  117. for (d = 0, dLen = data.length; d &lt; dLen; d++) {
  118. record = data[d];
  119. for (i = 0; i &lt; ln; i++) {
  120. this.labels.push(record.get(fields[i]));
  121. }
  122. }
  123. },
  124. // @private calculates labels positions and marker positions for rendering.
  125. applyData: function() {
  126. this.callParent();
  127. this.setLabels();
  128. var count = this.chart.getChartStore().getCount();
  129. return {
  130. from: 0,
  131. to: count - 1,
  132. power: 1,
  133. step: 1,
  134. steps: count - 1
  135. };
  136. }
  137. });
  138. </pre>
  139. </body>
  140. </html>