﻿Ext.chart.Chart.CHART_URL = '/Public/js/Chart/charts.swf';
Ext.onReady(function(){
	var lineStore = new Ext.data.XmlStore({            
		  url: '/Public/tree/HousePrice.xml',    
		  record: 'Price',   
		  fields:[{name:'MinValue'},{name:'MaxValue'},{name:'UnitValue'},{name:'PriceYear'},{name:'PriceMoney', type:'int'}]   
	});   
	lineStore.on('load',AJAX_Loaded, this, true);//这里需要注意
	lineStore.load();
   var MinValue=0,UnitValue=100,MaxValue=1000;
   function AJAX_Loaded()
   {
	  	var maxv=lineStore.getCount();
		if(lineStore.getCount()>1)
		  	maxv=1;
		for (var i = 0; i < maxv; i++) {
			var rec = lineStore.getAt(i);
			MinValue= rec.get("MinValue");
			UnitValue= rec.get("UnitValue");
			MaxValue= rec.get("MaxValue");
		}
	    $("#container").html("");
	    new Ext.Panel({
			renderTo: 'container',
			width:660,
			height:235,
			layout:'fit',
			frame:true,
			items: {
				xtype: 'linechart',
				store: lineStore,
				xField: 'PriceYear',
				yField: 'PriceMoney',
				tipRenderer : function(chart, record){ 
					var str = String.format('{1}元/平米\n',record.data.PriceYear.replace("-","年")+"月",record.data.PriceMoney) 
					return str; 
				}, 
				yAxis: new Ext.chart.NumericAxis({
					minimum  : MinValue,
					majorUnit : UnitValue,
					maximum:MaxValue
				}),
				chartStyle: {
					font: {
						name: 'Tahoma',
						color: 0x444444,
						size: 12
					  },
					dataTip: {
						padding: 5,
						border: {
							color: 0x99bbe8,
							size:0
						},
						background: {
							color: 0xDAE7F6,
							alpha: .6
						},
						font: {
							name: 'Tahoma',
							color: 0x15428B,
							size: 12,
							bold: true
						}
					},
					xAxis: {
						color: 0x69aBc8,
						majorTicks: {color: 0x69aBc8, length: 4},
						minorTicks: {color: 0x69aBc8, length: 12},
						majorGridLines: {size: 1, color: 0xeeeeee}
					},
					yAxis: {
						color: 0x69aBc8,
						majorTicks: {color: 0x69aBc8, length: 4},
						minorTicks: {color: 0x69aBc8, length: 2},
						majorGridLines: {size: 1, color: 0xdfe8f6}
					}
				},
				//定义两个图表,一个是柱状图,一个是折线图   
				series: [{   
					style: {   
					  color: 0xF43535
					}   
				}]
			}
		});
    }
});
