自己封装的Extjs组件GroupGrid的代码（7） ChartWindow.js

本文链接：https://blog.youkuaiyun.com/chy2z/article/details/80080360

本文介绍了一个使用ExtJS框架创建的图表窗口组件ChartWindow.js，该组件能够根据不同的图表类型（如饼图、折线图和柱状图）动态生成对应的图表界面，并详细配置了图表的样式参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ChartWindow.js 作用生成图表界面

Ext.chart.Chart.CHART_URL = '/ExtProject/Client/Ext/resources/charts.swf';
Ext.namespace("Ext.tet");
Ext.tet.ChartWindow=Ext.extend(Ext.Window, {
             chartUrl:"/ExtProject/pagination/statisChart.ashx",
             DataSourceParams:{tableName:"",where:null,chartType:"",chartKind:"",chartStatis:"",chartKindName:"",chartStatisName:""},
        width:650,
        height:400,
             resizable:true,
             plain : true,
             layout:"fit",
             createStore:function(){
                    if(this.store) return ;
                    this.store = new Ext.data.JsonStore({
                                          url:this.chartUrl,
                                          fields: [{name:this.DataSourceParams["chartKind"],type:"string"},{name:this.DataSourceParams["chartStatis"],type:"float"}],
                                          root:"data",
                                          baseParams:this.DataSourceParams
                                 });
                   this.store.load();
             },
             createWindowChart:function(){
                   if(this.windowChart) return ;
                   var chartStyle={
                                        padding: 10,
                                        animationEnabled: true,
                                        font: {
                                            name: 'Tahoma',
                                            color: 0x444444,
                                            size: 11
                                        },
                                        dataTip: {
                                            padding: 5,
                                            border: {
                                                color: 0x99bbe8,
                                                size:1
                                            },
                                            background: {
                                                color: 0xDAE7F6,
                                                alpha: .9
                                            },
                                            font: {
                                                name: 'Tahoma',
                                                color: 0x15428B,
                                                size: 10,
                                                bold: true
                                            }
                                        },
                                        xAxis: {
                                            color: 0x69aBc8,
                                            majorTicks: {color: 0x69aBc8, length: 4},
                                            minorTicks: {color: 0x69aBc8, length: 2},
                                            majorGridLines: {size: 1, color: 0xeeeeee}
                                        },
                                        yAxis: {
                                            color: 0x69aBc8,
                                            majorTicks: {color: 0x69aBc8, length: 4},
                                            minorTicks: {color: 0x69aBc8, length: 2},
                                            majorGridLines: {size: 1, color: 0xdfe8f6}
                                        }
                                   };
                   if(this.DataSourceParams["chartType"]=="饼型图"){
                          this.windowChart={    store: this.store,
                                                xtype: 'piechart',
                                                dataField: this.DataSourceParams["chartStatis"],
                                                categoryField: this.DataSourceParams["chartKind"],
                                                extraStyle:
                                                {
                                                    legend:
                                                    {
                                                        display: 'bottom',
                                                        padding: 5,
                                                        font:
                                                        {
                                                            family: 'Tahoma',
                                                            size: 13
                                                        }
                                                    }
                                                }
                                           };
                         this.iconCls="chart_pie";
                  }
                  else if(this.DataSourceParams["chartType"]=="折线图"){
                         this.windowChart={
                                           xtype:'linechart',
                                           store:this.store,
                                           yField:this.DataSourceParams["chartStatis"],
                                           xField:this.DataSourceParams["chartKind"],
                                           chartStyle:chartStyle,
                                           series:[{
                                                         type:'line',
                                                         displayName: this.DataSourceParams["chartStatisName"],
                                                         yField: this.DataSourceParams["chartStatis"],
                                                         style: {
                                                                  color: 0x15428B
                                                         }
                                                  }]
                                       };
                         this.iconCls="chart_line";
                  }
                  else if(this.DataSourceParams["chartType"]=="柱状图"){
                         this.windowChart={
                                                xtype:'columnchart',
                                                store:this.store,
                                                yField:this.DataSourceParams["chartStatis"],
                                                xField:this.DataSourceParams["chartKind"],
                                                xAxis: new Ext.chart.CategoryAxis({
                                                    title: this.DataSourceParams["chartKindName"]
                                                }),
                                                yAxis: new Ext.chart.NumericAxis({
                                                    title: this.DataSourceParams["chartStatisName"]
                                                }),
                                                extraStyle: {
                                                   xAxis: {
                                                        labelRotation: -90
                                                    }
                                                },
                                                chartStyle:chartStyle,
                                                series:[{
                                                         type:'column',
                                                         displayName: this.DataSourceParams["chartStatisName"],
                                                         yField: this.DataSourceParams["chartStatis"],
                                                         style: {
                                                                  color: 0x15428B
                                                         }
                                                      }]
                                           };
                        this.iconCls="chart_bar";
                  }
                  this.items=this.windowChart;
             },
             createTitle:function(){
                  this.title=this.title||this.DataSourceParams["chartKindName"]+this.DataSourceParams["chartStatisName"]+"统计图";
             },
             constructor:function(options){
                  Ext.apply(this,options);
                  this.createTitle();
                  this.createStore();
                  this.createWindowChart();
                  Ext.tet.ChartWindow.superclass.constructor.call(this);
             }
});