Callout.html 4.9 KB

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