dojochart之Line图

这篇学习dojo的线状图的画法，代码如下：

	<script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" 
		djConfig="isDebug:false, parseOnLoad: true"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dojo.parser");
		dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.action2d.Tooltip");
        dojo.require("dojox.charting.themes.MiamiNice");
        dojo.require("dojox.charting.widget.Legend");
       dojo.require("dojo.data.ItemFileWriteStore");
       dojo.require("dijit.form.NumberSpinner");  
	   dojo.require("dojox.charting.themes.PlotKit.blue");
	
	var emptyData = { identifier: 'id', label: 'id', items: []}; 	
	var jsonStore = new dojo.data.ItemFileWriteStore({data: emptyData}); 
	</script>
    
	<script type="text/javascript">
	function AlertIDFormat(value, rowIndex){
		var grid =  dijit.byId("grid");
		var alertid = grid.store.getValue(grid.getItem(rowIndex), "alertid");
	    return "<a href=\"/html/ips/log/ips_qry_alert.php?submit="+alertid+"&sort_order=\">" +Url.decode(value)+"</a>";
	}

	function SrcIpFormat(value, rowIndex){
		var grid =  dijit.byId("grid");
		var ip = grid.store.getValue(grid.getItem(rowIndex), "sourceip");
	    return "<a href=\"/html/ips/log/ips_stat_ipaddr.php?ip="+ip+"&netmask=32\">" +value+"</a>";

	}
	function DstIpFormat(value, rowIndex){
		var grid =  dijit.byId("grid");
		var ip = grid.store.getValue(grid.getItem(rowIndex), "destip");
	    return "<a href=\"/html/ips/log/ips_stat_ipaddr.php?ip="+ip+"&netmask=32\">" +value+"</a>";
	}
	</script>

	<script type="text/javascript">
//	var rowView = { cells: [ new dojox.grid.cells.RowIndex({ width: 5 }) ], noscroll: true };
	var layoutFlickrData = [

			[
				{ name: "ID", field: "alertid", width: '10%' ,formatter:AlertIDFormat },
				{ name: "Signature", field: "signature", width: '30%' },
				{ name: "Timestamp", field: "timestamp", width: '11%' },
				{ name: "Source Address", field: "sourceip", width: '11%' ,formatter:SrcIpFormat },
				{ name: "Dest. Address", field: "destip", width: '11%' ,formatter:DstIpFormat },
				{ name: "Layer 4 Proto", field: "lay4poto", width: '11%' }
			]
		];
	
		dojo.addOnLoad(function(){
			dojo.connect(window, "resize", grid, "resize");
			var drawurl = getChartURL();
			if(drawurl){
			   dojo.xhr('POST',{	        		 
		    url:drawurl,
		    sync:true,
		    handleAs :'json',
		    content:{
		 	   test:123
	 	    },
		    load:function(response){
	 		store =  new dojo.data.ItemFileReadStore({data:response});
			store =  response.items;
			var linex = response.lineX||"";
			var types = response.type;
				//alert(store);
			//alert(linex);
			//alert(types);
			drawPicture(types,store,linex);   //调用common.js中的drawPicture，进行画图动作，线状图的数据大概如下：
			
		
	 		 },
		    error:function(error){
		    }
	        });
			}
		});
		
		/*
		{'identifier':'id','idAttribute':'id','label':'id','type':1,'items':[{'x':0,'y':0.01,'tooltip':'0.01'},{'x':1,'y':0.01,'tooltip':'0.01'},{'x':2,'y':0.01,'tooltip':'0.01'},{'x':3,'y':0.01,'tooltip':'0.01'},{'x':4,'y':0.01,'tooltip':'0.01'},{'x':5,'y':0.01,'tooltip':'0.01'},{'x':6,'y':0.01,'tooltip':'0.01'},{'x':7,'y':0.01,'tooltip':'0.01'},{'x':8,'y':0.01,'tooltip':'0.01'},{'x':9,'y':0.01,'tooltip':'0.01'},{'x':10,'y':0.01,'tooltip':'0.01'},{'x':11,'y':0.01,'tooltip':'0.01'},{'x':12,'y':0.01,'tooltip':'0.01'},{'x':13,'y':9755,'tooltip':'9755'},{'x':14,'y':376,'tooltip':'376'},{'x':15,'y':0.01,'tooltip':'0.01'},{'x':16,'y':0.01,'tooltip':'0.01'},{'x':17,'y':0.01,'tooltip':'0.01'},{'x':18,'y':0.01,'tooltip':'0.01'},{'x':19,'y':0.01,'tooltip':'0.01'},{'x':20,'y':0.01,'tooltip':'0.01'},{'x':21,'y':0.01,'tooltip':'0.01'},{'x':22,'y':0.01,'tooltip':'0.01'},{'x':23,'y':0.01,'tooltip':'0.01'}],'lineX':[{'value':0,'text':'00'},{'value':1,'text':'01'},{'value':2,'text':'02'},{'value':3,'text':'03'},{'value':4,'text':'04'},{'value':5,'text':'05'},{'value':6,'text':'06'},{'value':7,'text':'07'},{'value':8,'text':'08'},{'value':9,'text':'09'},{'value':10,'text':'10'},{'value':11,'text':'11'},{'value':12,'text':'12'},{'value':13,'text':'13'},{'value':14,'text':'14'},{'value':15,'text':'15'},{'value':16,'text':'16'},{'value':17,'text':'17'},{'value':18,'text':'18'},{'value':19,'text':'19'},{'value':20,'text':'20'},{'value':21,'text':'21'},{'value':22,'text':'22'},{'value':23,'text':'23'}]}
		说明：
		items中，展示的是相应的数据点，一个{}对象，代表坐标轴上的一个点
		LineX中代表x轴上的坐标点的显示text，具体的代码部分，如下：
		
		
		function drawPicture(type,store,linex){
	    var oneLinex = [
		      {value: 0, text: "00"},
		      {value: 1, text: "01"}, 
		      {value: 2, text: "02"},
              {value: 3, text: "03"}, 
			  {value: 4, text: "04"},
              {value: 5, text: "05"}, 
			  {value: 6, text: "06"},
              {value: 7, text: "07"},
			  {value: 8, text: "08"},
              {value: 9, text: "09"}, 
			  {value: 10, text: "10"},
              {value: 11, text: "11"},
			  {value: 12, text: "12"},
			  {value: 13, text: "13"},
			  {value: 14, text: "14"},
			  {value: 15, text: "15"},
			  {value: 16, text: "16"},
			  {value: 17, text: "17"},
			  {value: 18, text: "18"},
			  {value: 19, text: "19"},
			  {value: 20, text: "20"},
			  {value: 21, text: "21"},
			  {value: 22, text: "22"},
			  {value: 23, text: "23"}];
	    var label;
		if(linex){
		  label = linex;
		}else{
		  label = oneLinex;
		}
	    var serlegend;
		if(type==1){
		  serlegend = "Today's alerts";
		}else if(type==2){
		  serlegend = "Last 24 hours alerts";
		}else if(type ==3){
		  serlegend = "Last 7 days alerts"; 
		}else{
		  serlegend = "Searise 1";	
		}
		
	   	var chart1 = new dojox.charting.Chart2D("lines");
		chart1.setTheme(dojox.charting.themes.PlotKit.blue);
        chart1.addPlot("default", {
            type: "Lines",  //图形类型
			markers:true,   //是否显示为marker类型，即鼠标放到每个点上，会有提示
			tension:"X"    //没有该选项，两点之间的线为直线，如果加上该属性，则两个点之间的线为曲线
        }).addAxis("x",{labels:label,includeZero: true}).addAxis("y", {
         vertical: true,includeZero: true   //是否包括零点
        }).addSeries(serlegend, store);
		//这三个是动态展示数据
		    var anim_a = new dojox.charting.action2d.MoveSlice(chart1, "default");
            var anim_b = new dojox.charting.action2d.Highlight(chart1, "default");
            var anim_c = new dojox.charting.action2d.Tooltip(chart1, "default");
            chart1.render();
            var legendTwo = new dojox.charting.widget.Legend({
                chart: chart1
            },
            "lines_legend");
	
	}
	//部分代码，完全的代码在common。js中	
		*/
		var url = getURL();
		if(!url){
		   alert("Bad url!");
		}else{
			updateData(webpath+url);
	    }
</script>	



     <div id="linescharts">
		<div class="line-area">
            <div id="lines_legend"></div>
			<div id="lines" class="chart"></div>
            
		</div>
	</div> 

 

详细的代码，查看附件，还有效果图