dojo+线性图

1.js脚本:

 
 
  
  @H_502_7@@H_502_7@ 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");
  
  
  
  @H_502_7@@H_502_7@makeCharts=function@H_502_7@(){ 
  
  var@H_502_7@chart1=new@H_502_7@dojox.charting.Chart2D("simplechart"@H_502_7@); 
  
  /*type: 
  
  @H_502_7@*Lines,Markers,Areas,MarkersOnly 
  
  @H_502_7@*/@H_502_7@
  
  //chart1.addPlot("default",{type:"Lines"}); @H_502_7@
  
  //chart1.addPlot("default",{type:"StackedAreas",lines:true,areas:true,markers:false}); @H_502_7@
  
  @H_502_7@chart1.addPlot("default"@H_502_7@,{type:"Lines"@H_502_7@,markers:true@H_502_7@,tension:"X"@H_502_7@,shadows:{dx:2,dy:2}}); 
  
  @H_502_7@chart1.addPlot("other"@H_502_7@,{type:"Areas"@H_502_7@}); 
  
  @H_502_7@
  
  @H_502_7@chart1.addPlot("Grid"@H_502_7@,{type:"Grid"@H_502_7@,
  
  @H_502_7@hAxis:"otherx"@H_502_7@,
  
  @H_502_7@vAxis:"othery"@H_502_7@,
  
  @H_502_7@hMajorLines:true@H_502_7@,
  
  @H_502_7@hMinorLines:false@H_502_7@,
  
  @H_502_7@vMajorLines:true@H_502_7@,
  
  @H_502_7@vMinorLines:false@H_502_7@
  
  @H_502_7@}); 
  
  //chart1.addAxis("x"); @H_502_7@
  
  @H_502_7@chart1.addAxis("x"@H_502_7@,{ 
  
  @H_502_7@labels:[ 
  
  @H_502_7@{value:1,text:"Jan"@H_502_7@},{value:2,text:"Feb"@H_502_7@},
  
  @H_502_7@{value:3,text:"Mar"@H_502_7@},{value:4,text:"Apr"@H_502_7@},
  
  @H_502_7@{value:5,text:"May"@H_502_7@},{value:6,text:"Jun"@H_502_7@},
  
  @H_502_7@{value:7,text:"Jul"@H_502_7@},{value:8,text:"Aug"@H_502_7@},
  
  @H_502_7@{value:9,text:"Sep"@H_502_7@},{value:10,text:"Oct"@H_502_7@},
  
  @H_502_7@{value:11,text:"Nov"@H_502_7@},{value:12,text:"Dec"@H_502_7@} 
  
  @H_502_7@] 
  
  @H_502_7@}); 
  
  @H_502_7@
  
  @H_502_7@chart1.addAxis("y"@H_502_7@,{vertical:true@H_502_7@}); 
  
  @H_502_7@chart1.addSeries("Series1"@H_502_7@,[0,1.5,2,3,4,5,7]); 
  
  @H_502_7@chart1.addSeries("Series2"@H_502_7@,[4,1,6,3],{plot:"other"@H_502_7@,stroke:{color:"green"@H_502_7@},fill:"lightblue"@H_502_7@}); 
  
  @H_502_7@chart1.addSeries("SeriesA"@H_502_7@,[{x:1,y:5},{x:1.5,y:1.7},{x:2,y:9},{x:5,y:3}],{stroke:{color:"red"@H_502_7@}}); 
  
  @H_502_7@chart1.render(); 
  
  @H_502_7@};@H_502_7@ 
  
  @H_502_7@dojo.addOnLoad(makeCharts);

2.HTML代码：

 
 
  
  @H_502_7@<div@H_502_7@id@H_502_7@="simplechart"@H_502_7@style@H_502_7@="width:600px;height:400px;"></div>@H_502_7@

3.页面展示效果：

dojo+线性图

猜你在找的Dojo相关文章