/ext-4.0.7/docs/source/Column4.html
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 */
96Ext.define('Ext.chart.series.Column', {
97
98 /* Begin Definitions */
99
100 alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
101
102 extend: 'Ext.chart.series.Bar',
103
104 /* End Definitions */
105
106 type: 'column',
107 alias: 'series.column',
108
109 column: true,
110
111<span id='Ext-chart-series-Column-cfg-xPadding'> /**
112</span> * @cfg {Number} xPadding
113 * Padding between the left/right axes and the bars
114 */
115 xPadding: 10,
116
117<span id='Ext-chart-series-Column-cfg-yPadding'> /**
118</span> * @cfg {Number} yPadding
119 * Padding between the top/bottom axes and the bars
120 */
121 yPadding: 0
122});</pre>
123</body>
124</html>