docs/source/Legend.html

   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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-Legend-method-constructor'><span id='Ext-chart-Legend'>/**
  19 </span></span> * @class Ext.chart.Legend
  20  *
  21  * Defines a legend for a chart's series.
  22  * The 'chart' member must be set prior to rendering.
  23  * The legend class displays a list of legend items each of them related with a
  24  * series being rendered. In order to render the legend item of the proper series
  25  * the series configuration object must have `showInSeries` set to true.
  26  *
  27  * The legend configuration object accepts a `position` as parameter.
  28  * The `position` parameter can be `left`, `right`
  29  * `top` or `bottom`. For example:
  30  *
  31  *     legend: {
  32  *         position: 'right'
  33  *     },
  34  *
  35  * Full example:
  36     &lt;pre&gt;&lt;code&gt;
  37     var store = Ext.create('Ext.data.JsonStore', {
  38         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  39         data: [
  40             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  41             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  42             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  43             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  44             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  45         ]
  46     });
  47
  48     Ext.create('Ext.chart.Chart', {
  49         renderTo: Ext.getBody(),
  50         width: 500,
  51         height: 300,
  52         animate: true,
  53         store: store,
  54         shadow: true,
  55         theme: 'Category1',
  56         legend: {
  57             position: 'top'
  58         },
  59          axes: [{
  60                 type: 'Numeric',
  61                 grid: true,
  62                 position: 'left',
  63                 fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  64                 title: 'Sample Values',
  65                 grid: {
  66                     odd: {
  67                         opacity: 1,
  68                         fill: '#ddd',
  69                         stroke: '#bbb',
  70                         'stroke-width': 1
  71                     }
  72                 },
  73                 minimum: 0,
  74                 adjustMinimumByMajorUnit: 0
  75             }, {
  76                 type: 'Category',
  77                 position: 'bottom',
  78                 fields: ['name'],
  79                 title: 'Sample Metrics',
  80                 grid: true,
  81                 label: {
  82                     rotate: {
  83                         degrees: 315
  84                     }
  85                 }
  86         }],
  87         series: [{
  88             type: 'area',
  89             highlight: false,
  90             axis: 'left',
  91             xField: 'name',
  92             yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  93             style: {
  94                 opacity: 0.93
  95             }
  96         }]
  97     });
  98     &lt;/code&gt;&lt;/pre&gt;
  99  *
 100  * @constructor
 101  */
 102 Ext.define('Ext.chart.Legend', {
 103
 104     /* Begin Definitions */
 105
 106     requires: ['Ext.chart.LegendItem'],
 107
 108     /* End Definitions */
 109
 110 <span id='Ext-chart-Legend-cfg-visible'>    /**
 111 </span>     * @cfg {Boolean} visible
 112      * Whether or not the legend should be displayed.
 113      */
 114     visible: true,
 115
 116 <span id='Ext-chart-Legend-cfg-position'>    /**
 117 </span>     * @cfg {String} position
 118      * The position of the legend in relation to the chart. One of: &quot;top&quot;,
 119      * &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;, or &quot;float&quot;. If set to &quot;float&quot;, then the legend
 120      * box will be positioned at the point denoted by the x and y parameters.
 121      */
 122     position: 'bottom',
 123
 124 <span id='Ext-chart-Legend-cfg-x'>    /**
 125 </span>     * @cfg {Number} x
 126      * X-position of the legend box. Used directly if position is set to &quot;float&quot;, otherwise
 127      * it will be calculated dynamically.
 128      */
 129     x: 0,
 130
 131 <span id='Ext-chart-Legend-cfg-y'>    /**
 132 </span>     * @cfg {Number} y
 133      * Y-position of the legend box. Used directly if position is set to &quot;float&quot;, otherwise
 134      * it will be calculated dynamically.
 135      */
 136     y: 0,
 137
 138 <span id='Ext-chart-Legend-cfg-labelFont'>    /**
 139 </span>     * @cfg {String} labelFont
 140      * Font to be used for the legend labels, eg '12px Helvetica'
 141      */
 142     labelFont: '12px Helvetica, sans-serif',
 143
 144 <span id='Ext-chart-Legend-cfg-boxStroke'>    /**
 145 </span>     * @cfg {String} boxStroke
 146      * Style of the stroke for the legend box
 147      */
 148     boxStroke: '#000',
 149
 150 <span id='Ext-chart-Legend-cfg-boxStrokeWidth'>    /**
 151 </span>     * @cfg {String} boxStrokeWidth
 152      * Width of the stroke for the legend box
 153      */
 154     boxStrokeWidth: 1,
 155
 156 <span id='Ext-chart-Legend-cfg-boxFill'>    /**
 157 </span>     * @cfg {String} boxFill
 158      * Fill style for the legend box
 159      */
 160     boxFill: '#FFF',
 161
 162 <span id='Ext-chart-Legend-cfg-itemSpacing'>    /**
 163 </span>     * @cfg {Number} itemSpacing
 164      * Amount of space between legend items
 165      */
 166     itemSpacing: 10,
 167
 168 <span id='Ext-chart-Legend-cfg-padding'>    /**
 169 </span>     * @cfg {Number} padding
 170      * Amount of padding between the legend box's border and its items
 171      */
 172     padding: 5,
 173
 174     // @private
 175     width: 0,
 176     // @private
 177     height: 0,
 178
 179 <span id='Ext-chart-Legend-cfg-boxZIndex'>    /**
 180 </span>     * @cfg {Number} boxZIndex
 181      * Sets the z-index for the legend. Defaults to 100.
 182      */
 183     boxZIndex: 100,
 184
 185     constructor: function(config) {
 186         var me = this;
 187         if (config) {
 188             Ext.apply(me, config);
 189         }
 190         me.items = [];
 191 <span id='Ext-chart-Legend-property-isVertical'>        /**
 192 </span>         * Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating.
 193          * @type {Boolean}
 194          */
 195         me.isVertical = (&quot;left|right|float&quot;.indexOf(me.position) !== -1);
 196
 197         // cache these here since they may get modified later on
 198         me.origX = me.x;
 199         me.origY = me.y;
 200     },
 201
 202 <span id='Ext-chart-Legend-method-create'>    /**
 203 </span>     * @private Create all the sprites for the legend
 204      */
 205     create: function() {
 206         var me = this;
 207         me.createItems();
 208         if (!me.created &amp;&amp; me.isDisplayed()) {
 209             me.createBox();
 210             me.created = true;
 211
 212             // Listen for changes to series titles to trigger regeneration of the legend
 213             me.chart.series.each(function(series) {
 214                 series.on('titlechange', function() {
 215                     me.create();
 216                     me.updatePosition();
 217                 });
 218             });
 219         }
 220     },
 221
 222 <span id='Ext-chart-Legend-method-isDisplayed'>    /**
 223 </span>     * @private Determine whether the legend should be displayed. Looks at the legend's 'visible' config,
 224      * and also the 'showInLegend' config for each of the series.
 225      */
 226     isDisplayed: function() {
 227         return this.visible &amp;&amp; this.chart.series.findIndex('showInLegend', true) !== -1;
 228     },
 229
 230 <span id='Ext-chart-Legend-method-createItems'>    /**
 231 </span>     * @private Create the series markers and labels
 232      */
 233     createItems: function() {
 234         var me = this,
 235             chart = me.chart,
 236             surface = chart.surface,
 237             items = me.items,
 238             padding = me.padding,
 239             itemSpacing = me.itemSpacing,
 240             spacingOffset = 2,
 241             maxWidth = 0,
 242             maxHeight = 0,
 243             totalWidth = 0,
 244             totalHeight = 0,
 245             vertical = me.isVertical,
 246             math = Math,
 247             mfloor = math.floor,
 248             mmax = math.max,
 249             index = 0,
 250             i = 0,
 251             len = items ? items.length : 0,
 252             x, y, spacing, item, bbox, height, width;
 253
 254         //remove all legend items
 255         if (len) {
 256             for (; i &lt; len; i++) {
 257                 items[i].destroy();
 258             }
 259         }
 260         //empty array
 261         items.length = [];
 262         // Create all the item labels, collecting their dimensions and positioning each one
 263         // properly in relation to the previous item
 264         chart.series.each(function(series, i) {
 265             if (series.showInLegend) {
 266                 Ext.each([].concat(series.yField), function(field, j) {
 267                     item = Ext.create('Ext.chart.LegendItem', {
 268                         legend: this,
 269                         series: series,
 270                         surface: chart.surface,
 271                         yFieldIndex: j
 272                     });
 273                     bbox = item.getBBox();
 274
 275                     //always measure from x=0, since not all markers go all the way to the left
 276                     width = bbox.width;
 277                     height = bbox.height;
 278
 279                     if (i + j === 0) {
 280                         spacing = vertical ? padding + height / 2 : padding;
 281                     }
 282                     else {
 283                         spacing = itemSpacing / (vertical ? 2 : 1);
 284                     }
 285                     // Set the item's position relative to the legend box
 286                     item.x = mfloor(vertical ? padding : totalWidth + spacing);
 287                     item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);
 288
 289                     // Collect cumulative dimensions
 290                     totalWidth += width + spacing;
 291                     totalHeight += height + spacing;
 292                     maxWidth = mmax(maxWidth, width);
 293                     maxHeight = mmax(maxHeight, height);
 294
 295                     items.push(item);
 296                 }, this);
 297             }
 298         }, me);
 299
 300         // Store the collected dimensions for later
 301         me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
 302         if (vertical &amp;&amp; items.length === 1) {
 303             spacingOffset = 1;
 304         }
 305         me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
 306         me.itemHeight = maxHeight;
 307     },
 308
 309 <span id='Ext-chart-Legend-method-getBBox'>    /**
 310 </span>     * @private Get the bounds for the legend's outer box
 311      */
 312     getBBox: function() {
 313         var me = this;
 314         return {
 315             x: Math.round(me.x) - me.boxStrokeWidth / 2,
 316             y: Math.round(me.y) - me.boxStrokeWidth / 2,
 317             width: me.width,
 318             height: me.height
 319         };
 320     },
 321
 322 <span id='Ext-chart-Legend-method-createBox'>    /**
 323 </span>     * @private Create the box around the legend items
 324      */
 325     createBox: function() {
 326         var me = this,
 327             box = me.boxSprite = me.chart.surface.add(Ext.apply({
 328                 type: 'rect',
 329                 stroke: me.boxStroke,
 330                 &quot;stroke-width&quot;: me.boxStrokeWidth,
 331                 fill: me.boxFill,
 332                 zIndex: me.boxZIndex
 333             }, me.getBBox()));
 334         box.redraw();
 335     },
 336
 337 <span id='Ext-chart-Legend-method-updatePosition'>    /**
 338 </span>     * @private Update the position of all the legend's sprites to match its current x/y values
 339      */
 340     updatePosition: function() {
 341         var me = this,
 342             x, y,
 343             legendWidth = me.width,
 344             legendHeight = me.height,
 345             padding = me.padding,
 346             chart = me.chart,
 347             chartBBox = chart.chartBBox,
 348             insets = chart.insetPadding,
 349             chartWidth = chartBBox.width - (insets * 2),
 350             chartHeight = chartBBox.height - (insets * 2),
 351             chartX = chartBBox.x + insets,
 352             chartY = chartBBox.y + insets,
 353             surface = chart.surface,
 354             mfloor = Math.floor;
 355
 356         if (me.isDisplayed()) {
 357             // Find the position based on the dimensions
 358             switch(me.position) {
 359                 case &quot;left&quot;:
 360                     x = insets;
 361                     y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
 362                     break;
 363                 case &quot;right&quot;:
 364                     x = mfloor(surface.width - legendWidth) - insets;
 365                     y = mfloor(chartY + chartHeight / 2 - legendHeight / 2);
 366                     break;
 367                 case &quot;top&quot;:
 368                     x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
 369                     y = insets;
 370                     break;
 371                 case &quot;bottom&quot;:
 372                     x = mfloor(chartX + chartWidth / 2 - legendWidth / 2);
 373                     y = mfloor(surface.height - legendHeight) - insets;
 374                     break;
 375                 default:
 376                     x = mfloor(me.origX) + insets;
 377                     y = mfloor(me.origY) + insets;
 378             }
 379             me.x = x;
 380             me.y = y;
 381
 382             // Update the position of each item
 383             Ext.each(me.items, function(item) {
 384                 item.updatePosition();
 385             });
 386             // Update the position of the outer box
 387             me.boxSprite.setAttributes(me.getBBox(), true);
 388         }
 389     }
 390 });</pre>
 391 </body>
 392 </html>