dojo画图之线状图

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

<mce:script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></mce:script> <mce:script type="text/javascript" src="js/common.js" mce_src="js/common.js"></mce:script> <mce: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}); // --></mce:script> <mce: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="/" mce_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="/" mce_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="/" mce_href="/""/html/ips/log/ips_stat_ipaddr.php?ip="+ip+"&netmask=32/">" +value+"</a>"; } // --></mce:script> <mce: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); } // --></mce:script> <div id="linescharts"> <div class="line-area"> <div id="lines_legend"></div> <div id="lines" class="chart"></div> </div> </div>

 

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

http://download.csdn.net/source/3005521