Column3.html 4.2 KB

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