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

<mce:script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djConfig="isDebug:false,par<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>nLoad: 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.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?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.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?ip="+ip+"&netmask=32/">" +value+"</a>"; } function DstIpFormat(value,"destip"); return "<a href="/" mce_href="/""/html/ips/log/ips_stat_ipaddr.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?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",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); //<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>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,{'x':2,{'x':3,{'x':4,{'x':5,{'x':6,{'x':7,{'x':8,{'x':9,{'x':10,{'x':11,{'x':12,{'x':13,'y':9755,'tooltip':'9755'},{'x':14,'y':376,'tooltip':'376'},{'x':15,{'x':16,{'x':17,{'x':18,{'x':19,{'x':20,{'x':21,{'x':22,{'x':23,'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轴上的坐标点的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>text，具体的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>部分，如下： function drawPicture(type,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,//是否<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>为marker类型，即鼠标放到每个点上，会有<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a> tension:"X" //没有该选项，两点之间的线为直线，如果<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>该<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>，则两个点之间的线为曲线 }).addAxis("x",{labels:label,includeZero: true}).addAxis("y",{ vertical: true,includeZero: true //是否<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>零点 }).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"); } //部分<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>，完全的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>在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