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