ext4.0绘制chart(柱状图,条形图)


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

你可能感兴趣的:(chart)