Chart.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:19k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.chart.Chart
  3.  * @extends Ext.FlashComponent
  4.  * The Ext.chart package provides the capability to visualize data with flash based charting.
  5.  * Each chart binds directly to an Ext.data.Store enabling automatic updates of the chart.
  6.  * @constructor
  7.  * @xtype chart
  8.  */
  9.  
  10.  Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
  11.     refreshBuffer: 100,
  12.     /**
  13.      * @cfg {Object} chartStyle
  14.      * Sets styles for this chart. Contains a number of default values. Modifying this property will override
  15.      * the base styles on the chart.
  16.      */
  17.     chartStyle: {
  18.         padding: 10,
  19.         animationEnabled: true,
  20.         font: {
  21.             name: 'Tahoma',
  22.             color: 0x444444,
  23.             size: 11
  24.         },
  25.         dataTip: {
  26.             padding: 5,
  27.             border: {
  28.                 color: 0x99bbe8,
  29.                 size:1
  30.             },
  31.             background: {
  32.                 color: 0xDAE7F6,
  33.                 alpha: .9
  34.             },
  35.             font: {
  36.                 name: 'Tahoma',
  37.                 color: 0x15428B,
  38.                 size: 10,
  39.                 bold: true
  40.             }
  41.         }
  42.     },
  43.     
  44.     /**
  45.      * @cfg {String} url
  46.      * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should
  47.      * be modified to point to the local charts resource.
  48.      */
  49.     
  50.     /**
  51.      * @cfg {Object} extraStyle
  52.      * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to <tt>null</tt>.
  53.      */
  54.     extraStyle: null,
  55.     
  56.     /**
  57.      * @cfg {Boolean} disableCaching
  58.      * True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
  59.      */
  60.     disableCaching: Ext.isIE || Ext.isOpera,
  61.     disableCacheParam: '_dc',
  62.     initComponent : function(){
  63.         Ext.chart.Chart.superclass.initComponent.call(this);
  64.         if(!this.url){
  65.             this.url = Ext.chart.Chart.CHART_URL;
  66.         }
  67.         if(this.disableCaching){
  68.             this.url = Ext.urlAppend(this.url, String.format('{0}={1}', this.disableCacheParam, new Date().getTime()));
  69.         }
  70.         this.addEvents(
  71.             'itemmouseover',
  72.             'itemmouseout',
  73.             'itemclick',
  74.             'itemdoubleclick',
  75.             'itemdragstart',
  76.             'itemdrag',
  77.             'itemdragend'
  78.         );
  79.         this.store = Ext.StoreMgr.lookup(this.store);
  80.     },
  81.     /**
  82.      * Sets a single style value on the Chart instance.
  83.      *
  84.      * @param name {String} Name of the Chart style value to change.
  85.      * @param value {Object} New value to pass to the Chart style.
  86.      */
  87.      setStyle: function(name, value){
  88.          this.swf.setStyle(name, Ext.encode(value));
  89.      },
  90.     /**
  91.      * Resets all styles on the Chart instance.
  92.      *
  93.      * @param styles {Object} Initializer for all Chart styles.
  94.      */
  95.     setStyles: function(styles){
  96.         this.swf.setStyles(Ext.encode(styles));
  97.     },
  98.     /**
  99.      * Sets the styles on all series in the Chart.
  100.      *
  101.      * @param styles {Array} Initializer for all Chart series styles.
  102.      */
  103.     setSeriesStyles: function(styles){
  104.         var s = [];
  105.         Ext.each(styles, function(style){
  106.             s.push(Ext.encode(style));
  107.         });
  108.         this.swf.setSeriesStyles(s);
  109.     },
  110.     setCategoryNames : function(names){
  111.         this.swf.setCategoryNames(names);
  112.     },
  113.     setTipRenderer : function(fn){
  114.         var chart = this;
  115.         this.tipFnName = this.createFnProxy(function(item, index, series){
  116.             var record = chart.store.getAt(index);
  117.             return fn(chart, record, index, series);
  118.         }, this.tipFnName);
  119.         this.swf.setDataTipFunction(this.tipFnName);
  120.     },
  121.     setSeries : function(series){
  122.         this.series = series;
  123.         this.refresh();
  124.     },
  125.     /**
  126.      * Changes the data store bound to this chart and refreshes it.
  127.      * @param {Store} store The store to bind to this chart
  128.      */
  129.     bindStore : function(store, initial){
  130.         if(!initial && this.store){
  131.             this.store.un("datachanged", this.refresh, this);
  132.             this.store.un("add", this.delayRefresh, this);
  133.             this.store.un("remove", this.delayRefresh, this);
  134.             this.store.un("update", this.delayRefresh, this);
  135.             this.store.un("clear", this.refresh, this);
  136.             if(store !== this.store && this.store.autoDestroy){
  137.                 this.store.destroy();
  138.             }
  139.         }
  140.         if(store){
  141.             store = Ext.StoreMgr.lookup(store);
  142.             store.on({
  143.                 scope: this,
  144.                 datachanged: this.refresh,
  145.                 add: this.delayRefresh,
  146.                 remove: this.delayRefresh,
  147.                 update: this.delayRefresh,
  148.                 clear: this.refresh
  149.             });
  150.         }
  151.         this.store = store;
  152.         if(store && !initial){
  153.             this.refresh();
  154.         }
  155.     },
  156.     onSwfReady : function(isReset){
  157.         Ext.chart.Chart.superclass.onSwfReady.call(this, isReset);
  158.         this.swf.setType(this.type);
  159.         if(this.chartStyle){
  160.             this.setStyles(Ext.apply(this.extraStyle || {}, this.chartStyle));
  161.         }
  162.         if(this.categoryNames){
  163.             this.setCategoryNames(this.categoryNames);
  164.         }
  165.         if(this.tipRenderer){
  166.             this.setTipRenderer(this.tipRenderer);
  167.         }
  168.         if(!isReset){
  169.             this.bindStore(this.store, true);
  170.         }
  171.         this.refresh.defer(10, this);
  172.     },
  173.     delayRefresh : function(){
  174.         if(!this.refreshTask){
  175.             this.refreshTask = new Ext.util.DelayedTask(this.refresh, this);
  176.         }
  177.         this.refreshTask.delay(this.refreshBuffer);
  178.     },
  179.     refresh : function(){
  180.         var styleChanged = false;
  181.         // convert the store data into something YUI charts can understand
  182.         var data = [], rs = this.store.data.items;
  183.         for(var j = 0, len = rs.length; j < len; j++){
  184.             data[j] = rs[j].data;
  185.         }
  186.         //make a copy of the series definitions so that we aren't
  187.         //editing them directly.
  188.         var dataProvider = [];
  189.         var seriesCount = 0;
  190.         var currentSeries = null;
  191.         var i = 0;
  192.         if(this.series){
  193.             seriesCount = this.series.length;
  194.             for(i = 0; i < seriesCount; i++){
  195.                 currentSeries = this.series[i];
  196.                 var clonedSeries = {};
  197.                 for(var prop in currentSeries){
  198.                     if(prop == "style" && currentSeries.style !== null){
  199.                         clonedSeries.style = Ext.encode(currentSeries.style);
  200.                         styleChanged = true;
  201.                         //we don't want to modify the styles again next time
  202.                         //so null out the style property.
  203.                         // this causes issues
  204.                         // currentSeries.style = null;
  205.                     } else{
  206.                         clonedSeries[prop] = currentSeries[prop];
  207.                     }
  208.                 }
  209.                 dataProvider.push(clonedSeries);
  210.             }
  211.         }
  212.         if(seriesCount > 0){
  213.             for(i = 0; i < seriesCount; i++){
  214.                 currentSeries = dataProvider[i];
  215.                 if(!currentSeries.type){
  216.                     currentSeries.type = this.type;
  217.                 }
  218.                 currentSeries.dataProvider = data;
  219.             }
  220.         } else{
  221.             dataProvider.push({type: this.type, dataProvider: data});
  222.         }
  223.         this.swf.setDataProvider(dataProvider);
  224.     },
  225.     createFnProxy : function(fn, old){
  226.         if(old){
  227.             delete window[old];
  228.         }
  229.         var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);
  230.         window[fnName] = fn;
  231.         return fnName;
  232.     },
  233.     
  234.     onDestroy: function(){
  235.         Ext.chart.Chart.superclass.onDestroy.call(this);
  236.         delete window[this.tipFnName];
  237.     }
  238. });
  239. Ext.reg('chart', Ext.chart.Chart);
  240. Ext.chart.Chart.PROXY_FN_ID = 0;
  241. /**
  242.  * Sets the url to load the chart from. This should be set to a local resource.
  243.  * @static
  244.  * @type String
  245.  */
  246. Ext.chart.Chart.CHART_URL = 'http:/' + '/yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf';
  247. /**
  248.  * @class Ext.chart.PieChart
  249.  * @extends Ext.chart.Chart
  250.  * @constructor
  251.  * @xtype piechart
  252.  */
  253. Ext.chart.PieChart = Ext.extend(Ext.chart.Chart, {
  254.     type: 'pie',
  255.     onSwfReady : function(isReset){
  256.         Ext.chart.PieChart.superclass.onSwfReady.call(this, isReset);
  257.         this.setDataField(this.dataField);
  258.         this.setCategoryField(this.categoryField);
  259.     },
  260.     setDataField : function(field){
  261.         this.dataField = field;
  262.         this.swf.setDataField(field);
  263.     },
  264.     setCategoryField : function(field){
  265.         this.categoryField = field;
  266.         this.swf.setCategoryField(field);
  267.     }
  268. });
  269. Ext.reg('piechart', Ext.chart.PieChart);
  270. /**
  271.  * @class Ext.chart.CartesianChart
  272.  * @extends Ext.chart.Chart
  273.  * @constructor
  274.  * @xtype cartesianchart
  275.  */
  276. Ext.chart.CartesianChart = Ext.extend(Ext.chart.Chart, {
  277.     onSwfReady : function(isReset){
  278.         Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);
  279.         if(this.xField){
  280.             this.setXField(this.xField);
  281.         }
  282.         if(this.yField){
  283.             this.setYField(this.yField);
  284.         }
  285.         if(this.xAxis){
  286.             this.setXAxis(this.xAxis);
  287.         }
  288.         if(this.yAxis){
  289.             this.setYAxis(this.yAxis);
  290.         }
  291.     },
  292.     setXField : function(value){
  293.         this.xField = value;
  294.         this.swf.setHorizontalField(value);
  295.     },
  296.     setYField : function(value){
  297.         this.yField = value;
  298.         this.swf.setVerticalField(value);
  299.     },
  300.     setXAxis : function(value){
  301.         this.xAxis = this.createAxis('xAxis', value);
  302.         this.swf.setHorizontalAxis(this.xAxis);
  303.     },
  304.     setYAxis : function(value){
  305.         this.yAxis = this.createAxis('yAxis', value);
  306.         this.swf.setVerticalAxis(this.yAxis);
  307.     },
  308.     createAxis : function(axis, value){
  309.         var o = Ext.apply({}, value), oldFn = null;
  310.         if(this[axis]){
  311.             oldFn = this[axis].labelFunction;
  312.         }
  313.         if(o.labelRenderer){
  314.             var fn = o.labelRenderer;
  315.             o.labelFunction = this.createFnProxy(function(v){
  316.                 return fn(v);
  317.             }, oldFn);
  318.             delete o.labelRenderer;
  319.         }
  320.         return o;
  321.     }
  322. });
  323. Ext.reg('cartesianchart', Ext.chart.CartesianChart);
  324. /**
  325.  * @class Ext.chart.LineChart
  326.  * @extends Ext.chart.CartesianChart
  327.  * @constructor
  328.  * @xtype linechart
  329.  */
  330. Ext.chart.LineChart = Ext.extend(Ext.chart.CartesianChart, {
  331.     type: 'line'
  332. });
  333. Ext.reg('linechart', Ext.chart.LineChart);
  334. /**
  335.  * @class Ext.chart.ColumnChart
  336.  * @extends Ext.chart.CartesianChart
  337.  * @constructor
  338.  * @xtype columnchart
  339.  */
  340. Ext.chart.ColumnChart = Ext.extend(Ext.chart.CartesianChart, {
  341.     type: 'column'
  342. });
  343. Ext.reg('columnchart', Ext.chart.ColumnChart);
  344. /**
  345.  * @class Ext.chart.StackedColumnChart
  346.  * @extends Ext.chart.CartesianChart
  347.  * @constructor
  348.  * @xtype stackedcolumnchart
  349.  */
  350. Ext.chart.StackedColumnChart = Ext.extend(Ext.chart.CartesianChart, {
  351.     type: 'stackcolumn'
  352. });
  353. Ext.reg('stackedcolumnchart', Ext.chart.StackedColumnChart);
  354. /**
  355.  * @class Ext.chart.BarChart
  356.  * @extends Ext.chart.CartesianChart
  357.  * @constructor
  358.  * @xtype barchart
  359.  */
  360. Ext.chart.BarChart = Ext.extend(Ext.chart.CartesianChart, {
  361.     type: 'bar'
  362. });
  363. Ext.reg('barchart', Ext.chart.BarChart);
  364. /**
  365.  * @class Ext.chart.StackedBarChart
  366.  * @extends Ext.chart.CartesianChart
  367.  * @constructor
  368.  * @xtype stackedbarchart
  369.  */
  370. Ext.chart.StackedBarChart = Ext.extend(Ext.chart.CartesianChart, {
  371.     type: 'stackbar'
  372. });
  373. Ext.reg('stackedbarchart', Ext.chart.StackedBarChart);
  374. /**
  375.  * @class Ext.chart.Axis
  376.  * Defines a CartesianChart's vertical or horizontal axis.
  377.  * @constructor
  378.  */
  379. Ext.chart.Axis = function(config){
  380.     Ext.apply(this, config);
  381. };
  382. Ext.chart.Axis.prototype =
  383. {
  384.     /**
  385.      * The type of axis.
  386.      *
  387.      * @property type
  388.      * @type String
  389.      */
  390.     type: null,
  391.     /**
  392.      * The direction in which the axis is drawn. May be "horizontal" or "vertical".
  393.      *
  394.      * @property orientation
  395.      * @type String
  396.      */
  397.     orientation: "horizontal",
  398.     /**
  399.      * If true, the items on the axis will be drawn in opposite direction.
  400.      *
  401.      * @property reverse
  402.      * @type Boolean
  403.      */
  404.     reverse: false,
  405.     /**
  406.      * A string reference to the globally-accessible function that may be called to
  407.      * determine each of the label values for this axis.
  408.      *
  409.      * @property labelFunction
  410.      * @type String
  411.      */
  412.     labelFunction: null,
  413.     /**
  414.      * If true, labels that overlap previously drawn labels on the axis will be hidden.
  415.      *
  416.      * @property hideOverlappingLabels
  417.      * @type Boolean
  418.      */
  419.     hideOverlappingLabels: true
  420. };
  421. /**
  422.  * @class Ext.chart.NumericAxis
  423.  * @extends Ext.chart.Axis
  424.  * A type of axis whose units are measured in numeric values.
  425.  * @constructor
  426.  */
  427. Ext.chart.NumericAxis = Ext.extend(Ext.chart.Axis, {
  428.     type: "numeric",
  429.     /**
  430.      * The minimum value drawn by the axis. If not set explicitly, the axis minimum
  431.      * will be calculated automatically.
  432.      *
  433.      * @property minimum
  434.      * @type Number
  435.      */
  436.     minimum: NaN,
  437.     /**
  438.      * The maximum value drawn by the axis. If not set explicitly, the axis maximum
  439.      * will be calculated automatically.
  440.      *
  441.      * @property maximum
  442.      * @type Number
  443.      */
  444.     maximum: NaN,
  445.     /**
  446.      * The spacing between major intervals on this axis.
  447.      *
  448.      * @property majorUnit
  449.      * @type Number
  450.      */
  451.     majorUnit: NaN,
  452.     /**
  453.      * The spacing between minor intervals on this axis.
  454.      *
  455.      * @property minorUnit
  456.      * @type Number
  457.      */
  458.     minorUnit: NaN,
  459.     /**
  460.      * If true, the labels, ticks, gridlines, and other objects will snap to
  461.      * the nearest major or minor unit. If false, their position will be based
  462.      * on the minimum value.
  463.      *
  464.      * @property snapToUnits
  465.      * @type Boolean
  466.      */
  467.     snapToUnits: true,
  468.     /**
  469.      * If true, and the bounds are calculated automatically, either the minimum or
  470.      * maximum will be set to zero.
  471.      *
  472.      * @property alwaysShowZero
  473.      * @type Boolean
  474.      */
  475.     alwaysShowZero: true,
  476.     /**
  477.      * The scaling algorithm to use on this axis. May be "linear" or "logarithmic".
  478.      *
  479.      * @property scale
  480.      * @type String
  481.      */
  482.     scale: "linear"
  483. });
  484. /**
  485.  * @class Ext.chart.TimeAxis
  486.  * @extends Ext.chart.Axis
  487.  * A type of axis whose units are measured in time-based values.
  488.  * @constructor
  489.  */
  490. Ext.chart.TimeAxis = Ext.extend(Ext.chart.Axis, {
  491.     type: "time",
  492.     /**
  493.      * The minimum value drawn by the axis. If not set explicitly, the axis minimum
  494.      * will be calculated automatically.
  495.      *
  496.      * @property minimum
  497.      * @type Date
  498.      */
  499.     minimum: null,
  500.     /**
  501.      * The maximum value drawn by the axis. If not set explicitly, the axis maximum
  502.      * will be calculated automatically.
  503.      *
  504.      * @property maximum
  505.      * @type Number
  506.      */
  507.     maximum: null,
  508.     /**
  509.      * The spacing between major intervals on this axis.
  510.      *
  511.      * @property majorUnit
  512.      * @type Number
  513.      */
  514.     majorUnit: NaN,
  515.     /**
  516.      * The time unit used by the majorUnit.
  517.      *
  518.      * @property majorTimeUnit
  519.      * @type String
  520.      */
  521.     majorTimeUnit: null,
  522.     /**
  523.      * The spacing between minor intervals on this axis.
  524.      *
  525.      * @property majorUnit
  526.      * @type Number
  527.      */
  528.     minorUnit: NaN,
  529.     /**
  530.      * The time unit used by the minorUnit.
  531.      *
  532.      * @property majorTimeUnit
  533.      * @type String
  534.      */
  535.     minorTimeUnit: null,
  536.     /**
  537.      * If true, the labels, ticks, gridlines, and other objects will snap to
  538.      * the nearest major or minor unit. If false, their position will be based
  539.      * on the minimum value.
  540.      *
  541.      * @property snapToUnits
  542.      * @type Boolean
  543.      */
  544.     snapToUnits: true
  545. });
  546. /**
  547.  * @class Ext.chart.CategoryAxis
  548.  * @extends Ext.chart.Axis
  549.  * A type of axis that displays items in categories.
  550.  * @constructor
  551.  */
  552. Ext.chart.CategoryAxis = Ext.extend(Ext.chart.Axis, {
  553.     type: "category",
  554.     /**
  555.      * A list of category names to display along this axis.
  556.      *
  557.      * @property categoryNames
  558.      * @type Array
  559.      */
  560.     categoryNames: null
  561. });
  562. /**
  563.  * @class Ext.chart.Series
  564.  * Series class for the charts widget.
  565.  * @constructor
  566.  */
  567. Ext.chart.Series = function(config) { Ext.apply(this, config); };
  568. Ext.chart.Series.prototype =
  569. {
  570.     /**
  571.      * The type of series.
  572.      *
  573.      * @property type
  574.      * @type String
  575.      */
  576.     type: null,
  577.     /**
  578.      * The human-readable name of the series.
  579.      *
  580.      * @property displayName
  581.      * @type String
  582.      */
  583.     displayName: null
  584. };
  585. /**
  586.  * @class Ext.chart.CartesianSeries
  587.  * @extends Ext.chart.Series
  588.  * CartesianSeries class for the charts widget.
  589.  * @constructor
  590.  */
  591. Ext.chart.CartesianSeries = Ext.extend(Ext.chart.Series, {
  592.     /**
  593.      * The field used to access the x-axis value from the items from the data source.
  594.      *
  595.      * @property xField
  596.      * @type String
  597.      */
  598.     xField: null,
  599.     /**
  600.      * The field used to access the y-axis value from the items from the data source.
  601.      *
  602.      * @property yField
  603.      * @type String
  604.      */
  605.     yField: null
  606. });
  607. /**
  608.  * @class Ext.chart.ColumnSeries
  609.  * @extends Ext.chart.CartesianSeries
  610.  * ColumnSeries class for the charts widget.
  611.  * @constructor
  612.  */
  613. Ext.chart.ColumnSeries = Ext.extend(Ext.chart.CartesianSeries, {
  614.     type: "column"
  615. });
  616. /**
  617.  * @class Ext.chart.LineSeries
  618.  * @extends Ext.chart.CartesianSeries
  619.  * LineSeries class for the charts widget.
  620.  * @constructor
  621.  */
  622. Ext.chart.LineSeries = Ext.extend(Ext.chart.CartesianSeries, {
  623.     type: "line"
  624. });
  625. /**
  626.  * @class Ext.chart.BarSeries
  627.  * @extends Ext.chart.CartesianSeries
  628.  * BarSeries class for the charts widget.
  629.  * @constructor
  630.  */
  631. Ext.chart.BarSeries = Ext.extend(Ext.chart.CartesianSeries, {
  632.     type: "bar"
  633. });
  634. /**
  635.  * @class Ext.chart.PieSeries
  636.  * @extends Ext.chart.Series
  637.  * PieSeries class for the charts widget.
  638.  * @constructor
  639.  */
  640. Ext.chart.PieSeries = Ext.extend(Ext.chart.Series, {
  641.     type: "pie",
  642.     dataField: null,
  643.     categoryField: null
  644. });