123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-chart-theme-Base'>/**
- </span> * Provides default colors for non-specified things. Should be sub-classed when creating new themes.
- * @private
- */
- Ext.define('Ext.chart.theme.Base', {
- /* Begin Definitions */
- requires: ['Ext.chart.theme.Theme'],
- /* End Definitions */
- constructor: function(config) {
- Ext.chart.theme.call(this, config, {
- background: false,
- axis: {
- stroke: '#444',
- 'stroke-width': 1
- },
- axisLabelTop: {
- fill: '#444',
- font: '12px Arial, Helvetica, sans-serif',
- spacing: 2,
- padding: 5,
- renderer: function(v) { return v; }
- },
- axisLabelRight: {
- fill: '#444',
- font: '12px Arial, Helvetica, sans-serif',
- spacing: 2,
- padding: 5,
- renderer: function(v) { return v; }
- },
- axisLabelBottom: {
- fill: '#444',
- font: '12px Arial, Helvetica, sans-serif',
- spacing: 2,
- padding: 5,
- renderer: function(v) { return v; }
- },
- axisLabelLeft: {
- fill: '#444',
- font: '12px Arial, Helvetica, sans-serif',
- spacing: 2,
- padding: 5,
- renderer: function(v) { return v; }
- },
- axisTitleTop: {
- font: 'bold 18px Arial',
- fill: '#444'
- },
- axisTitleRight: {
- font: 'bold 18px Arial',
- fill: '#444',
- rotate: {
- x:0, y:0,
- degrees: 270
- }
- },
- axisTitleBottom: {
- font: 'bold 18px Arial',
- fill: '#444'
- },
- axisTitleLeft: {
- font: 'bold 18px Arial',
- fill: '#444',
- rotate: {
- x:0, y:0,
- degrees: 270
- }
- },
- series: {
- 'stroke-width': 0
- },
- seriesLabel: {
- font: '12px Arial',
- fill: '#333'
- },
- marker: {
- stroke: '#555',
- radius: 3,
- size: 3
- },
- colors: [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
- seriesThemes: [{
- fill: "#115fa6"
- }, {
- fill: "#94ae0a"
- }, {
- fill: "#a61120"
- }, {
- fill: "#ff8809"
- }, {
- fill: "#ffd13e"
- }, {
- fill: "#a61187"
- }, {
- fill: "#24ad9a"
- }, {
- fill: "#7c7474"
- }, {
- fill: "#115fa6"
- }, {
- fill: "#94ae0a"
- }, {
- fill: "#a61120"
- }, {
- fill: "#ff8809"
- }, {
- fill: "#ffd13e"
- }, {
- fill: "#a61187"
- }, {
- fill: "#24ad9a"
- }, {
- fill: "#7c7474"
- }, {
- fill: "#a66111"
- }],
- markerThemes: [{
- fill: "#115fa6",
- type: 'circle'
- }, {
- fill: "#94ae0a",
- type: 'cross'
- }, {
- fill: "#115fa6",
- type: 'plus'
- }, {
- fill: "#94ae0a",
- type: 'circle'
- }, {
- fill: "#a61120",
- type: 'cross'
- }]
- });
- }
- }, function() {
- var palette = ['#b1da5a', '#4ce0e7', '#e84b67', '#da5abd', '#4d7fe6', '#fec935'],
- names = ['Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow'],
- i = 0, j = 0, l = palette.length, themes = Ext.chart.theme,
- categories = [['#f0a50a', '#c20024', '#2044ba', '#810065', '#7eae29'],
- ['#6d9824', '#87146e', '#2a9196', '#d39006', '#1e40ac'],
- ['#fbbc29', '#ce2e4e', '#7e0062', '#158b90', '#57880e'],
- ['#ef5773', '#fcbd2a', '#4f770d', '#1d3eaa', '#9b001f'],
- ['#7eae29', '#fdbe2a', '#910019', '#27b4bc', '#d74dbc'],
- ['#44dce1', '#0b2592', '#996e05', '#7fb325', '#b821a1']],
- cats = categories.length;
-
- //Create themes from base colors
- for (; i < l; i++) {
- themes[names[i]] = (function(color) {
- return Ext.extend(themes.Base, {
- constructor: function(config) {
- themes.Base.prototype.constructor.call(this, Ext.apply({
- baseColor: color
- }, config));
- }
- });
- }(palette[i]));
- }
-
- //Create theme from color array
- for (i = 0; i < cats; i++) {
- themes['Category' + (i + 1)] = (function(category) {
- return Ext.extend(themes.Base, {
- constructor: function(config) {
- themes.Base.prototype.constructor.call(this, Ext.apply({
- colors: category
- }, config));
- }
- });
- }(categories[i]));
- }
- });
- </pre>
- </body>
- </html>
|