EXT3绘制折线图

最近在做一个医院的项目，需要出一个年度统计图，考虑用EXT做。

需要的效果如图所示：

那么，肯定得有个store，data应该从数据库中取，不过这里做范例用，我们就写死了。

//年度统计的折线图
	var ndtjStore = new Ext.data.JsonStore({
	
		fields:['name','num1','num2','num3','num4'],
		data:[
		
			{name:'一月',num1:3500,num2:3000,num3:3700,num4:4000},
			{name:'二月',num1:2000,num2:1500,num3:3800,num4:3000},
			{name:'三月',num1:1500,num2:2000,num3:2500,num4:4000},
			{name:'四月',num1:500,num2:0,num3:1600,num4:3000},
			{name:'五月',num1:3500,num2:4000,num3:2900,num4:4000},
			{name:'六月',num1:2000,num2:1500,num3:2900,num4:4000},
			{name:'七月',num1:1500,num2:1000,num3:3700,num4:4000},
			{name:'八月',num1:500,num2:1000,num3:2500,num4:4000},
			{name:'九月',num1:3500,num2:3000,num3:2300,num4:4000},
			{name:'十月',num1:2000,num2:2500,num3:2100,num4:3900},
			{name:'十一月',num1:1500,num2:2000,num3:2000,num4:3800},
			{name:'十二月',num1:500,num2:1000,num3:1500,num4:3700}
		]
	});

然后定义LineChart的Ext.Panel：

var ndtjPanel =  new Ext.Panel({
        title: '年度统计',
        renderTo: ndtjDiv,
        width:'100%',
        height:300,
        layout:'fit',
	    style:'margin-left:2%',
        items:{
            xtype: 'linechart',
            url:'/ext3/resources/charts.swf',
            store: ndtjStore,
            xField: 'name',
            series:[
            
            	{type:'line',displayName:'宫颈',yField:'num1',style:{color:0xCCFF00}},
            	{type:'line',displayName:'卵巢',yField:'num2',style:{color:0xCC0000}},
            	{type:'line',displayName:'子宫',yField:'num3',style:{color:0x0033FF}},
            	{type:'line',displayName:'其他',yField:'num4',style:{color:0x66CC00}}
            ],
            extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            }
        }
    });

series对应多条折线。而displayName和extraStyle的legend对折线进行标注。