Base2.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  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-theme-Base'>/**
  19. </span> * Provides default colors for non-specified things. Should be sub-classed when creating new themes.
  20. * @private
  21. */
  22. Ext.define('Ext.chart.theme.Base', {
  23. /* Begin Definitions */
  24. requires: ['Ext.chart.theme.Theme'],
  25. /* End Definitions */
  26. constructor: function(config) {
  27. Ext.chart.theme.call(this, config, {
  28. background: false,
  29. axis: {
  30. stroke: '#444',
  31. 'stroke-width': 1
  32. },
  33. axisLabelTop: {
  34. fill: '#444',
  35. font: '12px Arial, Helvetica, sans-serif',
  36. spacing: 2,
  37. padding: 5,
  38. renderer: function(v) { return v; }
  39. },
  40. axisLabelRight: {
  41. fill: '#444',
  42. font: '12px Arial, Helvetica, sans-serif',
  43. spacing: 2,
  44. padding: 5,
  45. renderer: function(v) { return v; }
  46. },
  47. axisLabelBottom: {
  48. fill: '#444',
  49. font: '12px Arial, Helvetica, sans-serif',
  50. spacing: 2,
  51. padding: 5,
  52. renderer: function(v) { return v; }
  53. },
  54. axisLabelLeft: {
  55. fill: '#444',
  56. font: '12px Arial, Helvetica, sans-serif',
  57. spacing: 2,
  58. padding: 5,
  59. renderer: function(v) { return v; }
  60. },
  61. axisTitleTop: {
  62. font: 'bold 18px Arial',
  63. fill: '#444'
  64. },
  65. axisTitleRight: {
  66. font: 'bold 18px Arial',
  67. fill: '#444',
  68. rotate: {
  69. x:0, y:0,
  70. degrees: 270
  71. }
  72. },
  73. axisTitleBottom: {
  74. font: 'bold 18px Arial',
  75. fill: '#444'
  76. },
  77. axisTitleLeft: {
  78. font: 'bold 18px Arial',
  79. fill: '#444',
  80. rotate: {
  81. x:0, y:0,
  82. degrees: 270
  83. }
  84. },
  85. series: {
  86. 'stroke-width': 0
  87. },
  88. seriesLabel: {
  89. font: '12px Arial',
  90. fill: '#333'
  91. },
  92. marker: {
  93. stroke: '#555',
  94. radius: 3,
  95. size: 3
  96. },
  97. colors: [ &quot;#94ae0a&quot;, &quot;#115fa6&quot;,&quot;#a61120&quot;, &quot;#ff8809&quot;, &quot;#ffd13e&quot;, &quot;#a61187&quot;, &quot;#24ad9a&quot;, &quot;#7c7474&quot;, &quot;#a66111&quot;],
  98. seriesThemes: [{
  99. fill: &quot;#115fa6&quot;
  100. }, {
  101. fill: &quot;#94ae0a&quot;
  102. }, {
  103. fill: &quot;#a61120&quot;
  104. }, {
  105. fill: &quot;#ff8809&quot;
  106. }, {
  107. fill: &quot;#ffd13e&quot;
  108. }, {
  109. fill: &quot;#a61187&quot;
  110. }, {
  111. fill: &quot;#24ad9a&quot;
  112. }, {
  113. fill: &quot;#7c7474&quot;
  114. }, {
  115. fill: &quot;#115fa6&quot;
  116. }, {
  117. fill: &quot;#94ae0a&quot;
  118. }, {
  119. fill: &quot;#a61120&quot;
  120. }, {
  121. fill: &quot;#ff8809&quot;
  122. }, {
  123. fill: &quot;#ffd13e&quot;
  124. }, {
  125. fill: &quot;#a61187&quot;
  126. }, {
  127. fill: &quot;#24ad9a&quot;
  128. }, {
  129. fill: &quot;#7c7474&quot;
  130. }, {
  131. fill: &quot;#a66111&quot;
  132. }],
  133. markerThemes: [{
  134. fill: &quot;#115fa6&quot;,
  135. type: 'circle'
  136. }, {
  137. fill: &quot;#94ae0a&quot;,
  138. type: 'cross'
  139. }, {
  140. fill: &quot;#115fa6&quot;,
  141. type: 'plus'
  142. }, {
  143. fill: &quot;#94ae0a&quot;,
  144. type: 'circle'
  145. }, {
  146. fill: &quot;#a61120&quot;,
  147. type: 'cross'
  148. }]
  149. });
  150. }
  151. }, function() {
  152. var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'],
  153. names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'],
  154. i = 0, j = 0, l = palette.length, themes = Ext.chart.theme,
  155. categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'],
  156. ['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'],
  157. ['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'],
  158. ['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'],
  159. ['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'],
  160. ['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']],
  161. cats = categories.length;
  162. //Create themes from base colors
  163. for (; i &lt; l; i++) {
  164. themes[names[i]] = (function(color) {
  165. return Ext.extend(themes.Base, {
  166. constructor: function(config) {
  167. themes.Base.prototype.constructor.call(this, Ext.apply({
  168. baseColor: color
  169. }, config));
  170. }
  171. });
  172. }(palette[i]));
  173. }
  174. //Create theme from color array
  175. for (i = 0; i &lt; cats; i++) {
  176. themes['Category' + (i + 1)] = (function(category) {
  177. return Ext.extend(themes.Base, {
  178. constructor: function(config) {
  179. themes.Base.prototype.constructor.call(this, Ext.apply({
  180. colors: category
  181. }, config));
  182. }
  183. });
  184. }(categories[i]));
  185. }
  186. });
  187. </pre>
  188. </body>
  189. </html>