/ext-4.0.7/docs/source/Column4.html

https://bitbucket.org/srogerf/javascript · HTML · 124 lines · 116 code · 8 blank · 0 comment · 0 complexity · 553ef0f128b0a578a27bf73a7a3b722d MD5 · raw file

  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-series-Column'>/**
  19. </span> * @class Ext.chart.series.Column
  20. * @extends Ext.chart.series.Bar
  21. *
  22. * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
  23. * visualization technique to display quantitative information for different categories that can
  24. * show some progression (or regression) in the data set. As with all other series, the Column Series
  25. * must be appended in the *series* Chart array configuration. See the Chart documentation for more
  26. * information. A typical configuration object for the column series could be:
  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. * animate: true,
  45. * store: store,
  46. * axes: [
  47. * {
  48. * type: 'Numeric',
  49. * position: 'left',
  50. * fields: ['data1'],
  51. * label: {
  52. * renderer: Ext.util.Format.numberRenderer('0,0')
  53. * },
  54. * title: 'Sample Values',
  55. * grid: true,
  56. * minimum: 0
  57. * },
  58. * {
  59. * type: 'Category',
  60. * position: 'bottom',
  61. * fields: ['name'],
  62. * title: 'Sample Metrics'
  63. * }
  64. * ],
  65. * series: [
  66. * {
  67. * type: 'column',
  68. * axis: 'left',
  69. * highlight: true,
  70. * tips: {
  71. * trackMouse: true,
  72. * width: 140,
  73. * height: 28,
  74. * renderer: function(storeItem, item) {
  75. * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
  76. * }
  77. * },
  78. * label: {
  79. * display: 'insideEnd',
  80. * 'text-anchor': 'middle',
  81. * field: 'data1',
  82. * renderer: Ext.util.Format.numberRenderer('0'),
  83. * orientation: 'vertical',
  84. * color: '#333'
  85. * },
  86. * xField: 'name',
  87. * yField: 'data1'
  88. * }
  89. * ]
  90. * });
  91. *
  92. * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
  93. * set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
  94. * field to the data store `name` property and the `yField` as the data1 property of a store element.
  95. */
  96. Ext.define('Ext.chart.series.Column', {
  97. /* Begin Definitions */
  98. alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
  99. extend: 'Ext.chart.series.Bar',
  100. /* End Definitions */
  101. type: 'column',
  102. alias: 'series.column',
  103. column: true,
  104. <span id='Ext-chart-series-Column-cfg-xPadding'> /**
  105. </span> * @cfg {Number} xPadding
  106. * Padding between the left/right axes and the bars
  107. */
  108. xPadding: 10,
  109. <span id='Ext-chart-series-Column-cfg-yPadding'> /**
  110. </span> * @cfg {Number} yPadding
  111. * Padding between the top/bottom axes and the bars
  112. */
  113. yPadding: 0
  114. });</pre>
  115. </body>
  116. </html>