dojo+线性图

前端之家收集整理的这篇文章主要介绍了dojo+线性图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.js脚本:

 
 
  1. @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");
  2. @H_502_7@@H_502_7@makeCharts=function@H_502_7@(){
  3. var@H_502_7@chart1=new@H_502_7@dojox.charting.Chart2D("simplechart"@H_502_7@);
  4. /*type:
  5. @H_502_7@*Lines,Markers,Areas,MarkersOnly
  6. @H_502_7@*/@H_502_7@
  7. //chart1.addPlot("default",{type:"Lines"}); @H_502_7@
  8. //chart1.addPlot("default",{type:"StackedAreas",lines:true,areas:true,markers:false}); @H_502_7@
  9. @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}});
  10. @H_502_7@chart1.addPlot("other"@H_502_7@,{type:"Areas"@H_502_7@});
  11. @H_502_7@
  12. @H_502_7@chart1.addPlot("Grid"@H_502_7@,{type:"Grid"@H_502_7@,
  13. @H_502_7@hAxis:"otherx"@H_502_7@,
  14. @H_502_7@vAxis:"othery"@H_502_7@,
  15. @H_502_7@hMajorLines:true@H_502_7@,
  16. @H_502_7@hMinorLines:false@H_502_7@,
  17. @H_502_7@vMajorLines:true@H_502_7@,
  18. @H_502_7@vMinorLines:false@H_502_7@
  19. @H_502_7@});
  20. //chart1.addAxis("x"); @H_502_7@
  21. @H_502_7@chart1.addAxis("x"@H_502_7@,{
  22. @H_502_7@labels:[
  23. @H_502_7@{value:1,text:"Jan"@H_502_7@},{value:2,text:"Feb"@H_502_7@},
  24. @H_502_7@{value:3,text:"Mar"@H_502_7@},{value:4,text:"Apr"@H_502_7@},
  25. @H_502_7@{value:5,text:"May"@H_502_7@},{value:6,text:"Jun"@H_502_7@},
  26. @H_502_7@{value:7,text:"Jul"@H_502_7@},{value:8,text:"Aug"@H_502_7@},
  27. @H_502_7@{value:9,text:"Sep"@H_502_7@},{value:10,text:"Oct"@H_502_7@},
  28. @H_502_7@{value:11,text:"Nov"@H_502_7@},{value:12,text:"Dec"@H_502_7@}
  29. @H_502_7@]
  30. @H_502_7@});
  31. @H_502_7@
  32. @H_502_7@chart1.addAxis("y"@H_502_7@,{vertical:true@H_502_7@});
  33. @H_502_7@chart1.addSeries("Series1"@H_502_7@,[0,1.5,2,3,4,5,7]);
  34. @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@});
  35. @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@}});
  36. @H_502_7@chart1.render();
  37. @H_502_7@};@H_502_7@
  38. @H_502_7@dojo.addOnLoad(makeCharts);

2.HTML代码

 
 
  1. @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相关文章