`

ext4.0绘制chart（柱状图，条形图）

 
阅读更多

Jsp代码
  1. <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
  2. <%
  3. Stringpath=request.getContextPath();
  4. StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  7. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
  9. <head>
  10. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  11. <linkrel="stylesheet"type="text/css"href="<%=basePath%>ext-4.0/resources/css/ext-all.css"/>
  12. <scripttype="text/javascript"src="<%=basePath%>ext-4.0/bootstrap.js"></script>
  13. <scripttype="text/javascript"src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
  14. <linkhref="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>
  15. <linkhref="<%=basePath%>css/core.css"rel="stylesheet"type="text/css"media="screen"/>
  16. <linkhref="<%=basePath%>css/style.css"rel="stylesheet"type="text/css"media="screen"/>
  17. <scriptsrc="<%=basePath%>js/jquery/jquery-1.3.2.min.js"type="text/javascript"></script>
  18. <scripttype="text/javascript">
  19. Ext.onReady(function(){
  20. Ext.create('Ext.panel.Panel',{
  21. title:'3天内特大重大故障饼状图',
  22. width:500,
  23. height:500,
  24. renderTo:'div1',
  25. layout:'card',
  26. items:[{
  27. xtype:'chart',
  28. store:{
  29. fields:['platName','ratio','level','troubleLevel'],
  30. proxy:{
  31. type:'ajax',
  32. url:'<%=basePath%>reports/3dayAgo.action',
  33. reader:{
  34. type:'json',//Ext.data.reader.Json解析器
  35. root:'reportLs'
  36. }
  37. },
  38. autoLoad:true
  39. },
  40. animate:true,//是否启用动画效果
  41. legend:{
  42. position:'bottom'//图例位置
  43. },
  44. shadow:true,
  45. series:[{
  46. type:'pie',//图表序列类型
  47. field:'ratio',//对应饼状图角度的字段名
  48. showInLegend:true,//是否显示在图例当中
  49. //colorSet:['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色配置
  50. donut:20,//麦圈图中空部分半径
  51. label:{
  52. field:'platName',//标签字段名
  53. contrast:true,
  54. color:'#FFFF00',
  55. renderer:function(v){//自定义标签渲染函数
  56. return"["+v+"]";
  57. },
  58. display:'middle',//标签显现方式
  59. font:'18px"LucidaGrande"'//字体
  60. },
  61. highlight:{
  62. segment:{
  63. margin:10//空白区域宽度
  64. }
  65. },
  66. tips:{
  67. trackMouse:true,//是否启用鼠标跟踪
  68. width:50,
  69. height:28,
  70. renderer:function(storeItem){//自定义渲染函数
  71. vartitle=storeItem.get('ratio')+'%';
  72. this.setTitle(title);
  73. }
  74. }
  75. }]
  76. }]
  77. });
  79. vardataStore=newExt.data.JsonStore({
  80. fields:['ageRange','proportion','growing'],
  81. data:[
  82. {ageRange:'小于30岁',proportion:10,growing:35},
  83. {ageRange:'30-40岁',proportion:40,growing:30},
  84. {ageRange:'40-50岁',proportion:30,growing:30},
  85. {ageRange:'50岁以上',proportion:20,growing:30}
  86. ]
  87. });
  88. Ext.create('Ext.panel.Panel',{
  89. title:'3天内特大重大故障条形图',
  90. width:500,
  91. height:500,
  92. renderTo:'div2',
  93. layout:'card',
  94. items:[{
  95. xtype:'chart',
  96. store:{
  97. fields:['troubleName','size'],
  98. proxy:{
  99. type:'ajax',
  100. url:'<%=basePath%>reports/3dayAgo2.action',
  101. reader:{
  102. type:'json',//Ext.data.reader.Json解析器
  103. root:'repBeans'
  104. }
  105. },
  106. autoLoad:true
  107. },
  108. axes:[{
  109. type:'Numeric',
  110. position:'left',
  111. minimum:0,//数轴最小值
  112. maximum:5,//数轴最大值
  113. //fields:['size','size'],//同时展示2个数据
  114. title:'故障次数'
  115. },{
  116. type:'Category',
  117. position:'bottom',
  118. fields:['troubleName'],
  119. title:'平台级别'
  120. }],
  121. legend:{
  122. position:'bottom'//图例位置
  123. },
  124. series:[{
  125. type:'column',
  126. axis:'left',
  127. xField:['troubleName'],//x轴字段
  128. yField:['size'],//y轴字段
  129. title:['3天内故障发生次数'],//配置图例字段说明
  130. label:{
  131. field:['size'],//标签字段名
  132. display:'outside',//标签显现方式
  133. font:'12px"LucidaGrande"',//字体
  134. renderer:function(v){//自定义标签渲染函数
  135. returnv+'次';
  136. }
  137. }
  138. }]
  139. }]
  140. });
  141. });
  142. </script>
  143. </head>
  144. <body>
  145. <divstyle="float:left;padding-left:10px"id="div1"></div>
  146. <divstyle="float:right;padding-right:10px"id="div2"></div>
  147. </body>
  148. </html>
  150. <scripttype="text/javascript">
  151. $(function(){
  152. //alert($(document).height());
  153. h=$(document).height()-64;
  155. $("#form").css("height",h);
  156. });
  157. </script>
分享到：
| jquery foreach
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics