ExtJs4.0之曲线图

    //定义曲线图数据源store  
    var riskLineChartStore = Ext.create('Ext.data.Store', {  
        id : 'riskLineChartStore',  
        //store包含的数据字段  
        fields : ['riskLineLevel', 'riskLineTime', 'leftCoordinate'],  
        autoDestroy : true,  
        //自动加载数据  
        autoLoad : true,  
        proxy : {  
            // 异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可  
            type : 'ajax',  
            url : './homePage!loadAction.do?loadFlag=' + 'riskLine',  
            // 数据读取器  
            reader : {  
                //数据格式为json  
                type : 'json',  
                //数据存在返回的list中  
                root : 'list'  
            }  
        }  
    });  
      
    //定义工具栏  
    var riskLineTopBar = Ext.create('Ext.toolbar.Toolbar', {  
        //设置工具栏位置  
        region : 'north',  
        //工具栏上包含的元素  
        items : [{  
            width : distingruishiability<2300?(300*0.6):300,  
            labelWidth:distingruishiability<2300?(270*0.6):270,  
            //label标签上显示的内容  
            fieldLabel : '历史风险曲线（24小时内风险走势）',  
            //label标题与内容的分隔符，此处为空，可以利用此属性设置必须输入的字段，即设置分割字符为红色星号即可  
            labelSeparator : '',  
            //设置类型为displayfield  
            xtype : 'displayfield'  
        }, '->', {  
            //‘->’表示该标签之后的元素会靠右显示  
            xtype : 'button', // default for Toolbars  
            text : '刷新',  
            icon : 'image/refresh.png',  
            handler : function() {  
                riskLineChartStore.load();                            
            }  
        }]  
    });  
      
    //定义曲线图  
    var riskLineChart = Ext.create('Ext.chart.Chart', {  
        //设置类型  
        xtype:'chart',  
        //将曲线图渲染到页面内，Ext.getBody()获取到的是页面的body区域，renderTo后还可跟某div的Id  
        renderTo : Ext.getBody(),  
        //设置高度  
        height : 236*homepageChartRate,  
        // 设置宽度  
        width : 380*homepageChartRate,  
        animate : true,  
        //设置数据源  
        store : riskLineChartStore,  
        //设置坐标轴属性  
        axes : [{  
            //设置横坐标为类别  
            type : 'Category',  
            //横坐标的位置  
            position : 'bottom',  
            //横坐标对应的store中的字段  
            fields : ['riskLineTime'],  
            //横坐标名称  
            title : '风险时间',  
            //  
            dashSize:1,       
            label: {  
                //设置横坐标旋转60度显示  
                rotate: {  
                degrees: -60  
                }  
            }  
            }, {  
            //设置宗纵坐标为数字类型  
            type : 'Numeric',  
            //设置纵坐标显示的位置  
            position : 'left',  
            //设置纵坐标对应的数据字段  
            fields : ['leftCoordinate'],  
            //设置纵坐标标题  
            title : '风险等级',  
            //设置是否显示坐标线  
            grid : true,  
            //坐标最小值  
            minimum : 0,  
            //最大值  
            maximum : 5,  
            dashSize:1,  
            label: {  
                //格式化（设置格式）纵坐标数据  
                renderer: Ext.util.Format.numberRenderer('0')  
            },  
            majorTickSteps : 5  
                /*grid : { 
                    odd : { 
                        opacity : 1, 
                        fill : '#ddd', 
                        stroke : '#bbb', 
                        'stroke-width' : 1 
                    } 
                }*/  
            }],  
        //设置曲线属性  
        series : [{  
                //类型设置为曲线  
                type : 'line',  
                highlight : {  
                    size : 7,  
                    radius : 7  
                },  
                axis : 'left',  
                xField : 'riskLineTime',  
                yField : 'riskLineLevel',  
                font:'5px Helvetica, sans-serif',  
                markerCfg : {  
                    type : 'cross',  
                    size : 4,  
                    radius : 4,  
                    'stroke-width' : 0  
                }  
            }]  
    });  

原文链接：blog.csdn.net/kevinzhangfei/article/details/8665423