/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
- <!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-series-Column'>/**
- </span> * @class Ext.chart.series.Column
- * @extends Ext.chart.series.Bar
- *
- * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
- * visualization technique to display quantitative information for different categories that can
- * show some progression (or regression) in the data set. As with all other series, the Column Series
- * must be appended in the *series* Chart array configuration. See the Chart documentation for more
- * information. A typical configuration object for the column series could be:
- *
- * @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,
- * animate: true,
- * store: store,
- * axes: [
- * {
- * type: 'Numeric',
- * position: 'left',
- * fields: ['data1'],
- * label: {
- * renderer: Ext.util.Format.numberRenderer('0,0')
- * },
- * title: 'Sample Values',
- * grid: true,
- * minimum: 0
- * },
- * {
- * type: 'Category',
- * position: 'bottom',
- * fields: ['name'],
- * title: 'Sample Metrics'
- * }
- * ],
- * series: [
- * {
- * type: 'column',
- * axis: 'left',
- * highlight: true,
- * tips: {
- * trackMouse: true,
- * width: 140,
- * height: 28,
- * renderer: function(storeItem, item) {
- * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
- * }
- * },
- * label: {
- * display: 'insideEnd',
- * 'text-anchor': 'middle',
- * field: 'data1',
- * renderer: Ext.util.Format.numberRenderer('0'),
- * orientation: 'vertical',
- * color: '#333'
- * },
- * xField: 'name',
- * yField: 'data1'
- * }
- * ]
- * });
- *
- * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
- * set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
- * field to the data store `name` property and the `yField` as the data1 property of a store element.
- */
- Ext.define('Ext.chart.series.Column', {
- /* Begin Definitions */
- alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
- extend: 'Ext.chart.series.Bar',
- /* End Definitions */
- type: 'column',
- alias: 'series.column',
- column: true,
- <span id='Ext-chart-series-Column-cfg-xPadding'> /**
- </span> * @cfg {Number} xPadding
- * Padding between the left/right axes and the bars
- */
- xPadding: 10,
- <span id='Ext-chart-series-Column-cfg-yPadding'> /**
- </span> * @cfg {Number} yPadding
- * Padding between the top/bottom axes and the bars
- */
- yPadding: 0
- });</pre>
- </body>
- </html>