docs/source/Callout.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="../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-Callout'>/**
  19 </span> * @class Ext.chart.Callout
  20  * A mixin providing callout functionality for Ext.chart.series.Series.
  21  */
  22 Ext.define('Ext.chart.Callout', {
  23
  24     /* Begin Definitions */
  25
  26     /* End Definitions */
  27
  28     constructor: function(config) {
  29         if (config.callouts) {
  30             config.callouts.styles = Ext.applyIf(config.callouts.styles || {}, {
  31                 color: &quot;#000&quot;,
  32                 font: &quot;11px Helvetica, sans-serif&quot;
  33             });
  34             this.callouts = Ext.apply(this.callouts || {}, config.callouts);
  35             this.calloutsArray = [];
  36         }
  37     },
  38
  39     renderCallouts: function() {
  40         if (!this.callouts) {
  41             return;
  42         }
  43
  44         var me = this,
  45             items = me.items,
  46             animate = me.chart.animate,
  47             config = me.callouts,
  48             styles = config.styles,
  49             group = me.calloutsArray,
  50             store = me.chart.store,
  51             len = store.getCount(),
  52             ratio = items.length / len,
  53             previouslyPlacedCallouts = [],
  54             i,
  55             count,
  56             j,
  57             p;
  58
  59         for (i = 0, count = 0; i &lt; len; i++) {
  60             for (j = 0; j &lt; ratio; j++) {
  61                 var item = items[count],
  62                     label = group[count],
  63                     storeItem = store.getAt(i),
  64                     display;
  65
  66                 display = config.filter(storeItem);
  67
  68                 if (!display &amp;&amp; !label) {
  69                     count++;
  70                     continue;
  71                 }
  72
  73                 if (!label) {
  74                     group[count] = label = me.onCreateCallout(storeItem, item, i, display, j, count);
  75                 }
  76                 for (p in label) {
  77                     if (label[p] &amp;&amp; label[p].setAttributes) {
  78                         label[p].setAttributes(styles, true);
  79                     }
  80                 }
  81                 if (!display) {
  82                     for (p in label) {
  83                         if (label[p]) {
  84                             if (label[p].setAttributes) {
  85                                 label[p].setAttributes({
  86                                     hidden: true
  87                                 }, true);
  88                             } else if(label[p].setVisible) {
  89                                 label[p].setVisible(false);
  90                             }
  91                         }
  92                     }
  93                 }
  94                 config.renderer(label, storeItem);
  95                 me.onPlaceCallout(label, storeItem, item, i, display, animate,
  96                                   j, count, previouslyPlacedCallouts);
  97                 previouslyPlacedCallouts.push(label);
  98                 count++;
  99             }
 100         }
 101         this.hideCallouts(count);
 102     },
 103
 104     onCreateCallout: function(storeItem, item, i, display) {
 105         var me = this,
 106             group = me.calloutsGroup,
 107             config = me.callouts,
 108             styles = config.styles,
 109             width = styles.width,
 110             height = styles.height,
 111             chart = me.chart,
 112             surface = chart.surface,
 113             calloutObj = {
 114                 //label: false,
 115                 //box: false,
 116                 lines: false
 117             };
 118
 119         calloutObj.lines = surface.add(Ext.apply({},
 120         {
 121             type: 'path',
 122             path: 'M0,0',
 123             stroke: me.getLegendColor() || '#555'
 124         },
 125         styles));
 126
 127         if (config.items) {
 128             calloutObj.panel = Ext.create('widget.panel', {
 129                 style: &quot;position: absolute;&quot;,
 130                 width: width,
 131                 height: height,
 132                 items: config.items,
 133                 renderTo: chart.el
 134             });
 135         }
 136
 137         return calloutObj;
 138     },
 139
 140     hideCallouts: function(index) {
 141         var calloutsArray = this.calloutsArray,
 142             len = calloutsArray.length,
 143             co,
 144             p;
 145         while (len--&gt;index) {
 146             co = calloutsArray[len];
 147             for (p in co) {
 148                 if (co[p]) {
 149                     co[p].hide(true);
 150                 }
 151             }
 152         }
 153     }
 154 });
 155 </pre>
 156 </body>
 157 </html>