1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10. <link rel="stylesheet" type="text/css" href="<%=basePath%>ext-4.0/resources/css/ext-all.css" />
  11. <script type="text/javascript" src="<%=basePath%>ext-4.0/bootstrap.js"></script>
  12. <script type="text/javascript" src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
  13. <link href="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  14. <link href="<%=basePath %>css/core.css" rel="stylesheet" type="text/css" media="screen"/>
  15. <link href="<%=basePath %>css/style.css" rel="stylesheet" type="text/css" media="screen"/>
  16. <script src="<%=basePath%>js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  17. <script type="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 "Lucida Grande"'//字体
  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. var title =  storeItem.get('ratio') + '%';
  71. this.setTitle(title);
  72. }
  73. }
  74. }]
  75. }]
  76. });
  77. var dataStore = new Ext.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 "Lucida Grande"',//字体
  132. renderer : function(v){//自定义标签渲染函数
  133. return v + '次';
  134. }
  135. }
  136. }]
  137. }]
  138. });
  139. });
  140. </script>
  141. </head>
  142. <body>
  143. <div style="float: left;padding-left: 10px" id="div1"></div>
  144. <div style="float: right;padding-right: 10px" id="div2"></div>
  145. </body>
  146. </html>
  147. <script type="text/javascript">
  148. $(function(){
  149. //     alert($(document).height());
  150. h = $(document).height() - 64;
  151. $("#form").css("height",h);
  152. });
  153. </script>

ext4.0绘制chart（柱状图，条形图）的更多相关文章

  1. ASP.NET Core +Highchart+ajax绘制动态柱状图

    一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...

  2. iOS绘制收益柱状图

    项目需求,参考了其他绘图demo,自己绘制出来了,不过代码改得有点乱,添加了很多变量,时间关系没用太合适的命名,逻辑处理也没进行优化. 看看效果图(虚线区域都是画的,其他区域添加的都是控件),附上源码 ...

  3. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  4. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  5. EXTJS4.2 chart 柱状图

    chart 柱状图 Ext.require('Ext.chart.*'); Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout ...

  6. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  7. 小白学Python（13）——pyecharts 绘制 柱状图/条形图 Bar

    Bar-基本示例 from example.commons import Faker from pyecharts import options as opts from pyecharts.char ...

  8. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  9. python Matplotlib 系列教程(三)——绘制直方图和条形图

    在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...

随机推荐

  1. bzoj1975

    显然是类似k短路,直接不停增广即可 好久没写A*了,裸的A*可能会TLE 加点剪枝就卡过去了……… type node=record po,next:longint; cost:double; end ...

  2. Spring MVC定义拦截器

    拦截器: package sy.Interceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http ...

  3. cocos2d-x 小技巧

    1.字符串 与 数据结构互转 CCPoint: CCPointFromString(); {x, y} CCSize: CCSizeFromString(); {w, h} CCRect: CCSiz ...

  4. 如何用css3实现风车效果

    前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...

  5. Java [Leetcode 169]Majority Element

    题目描述: Given an array of size n, find the majority element. The majority element is the element that ...

  6. 【转】setTag()/getTag()

    原文网址:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html View中的setTag(Onbect)表示给View添 ...

  7. MyBatis 如何接收参数

    MyBatis的mapper接口不需要自己实现,框架会自动帮我们实现,到时候直接调用就可以了.定义的mapper接口中的方法可以有多个参数吗?答案是肯定.在Ibatis时代是自己通过代码实现如何调用x ...

  8. centos软件环境

    1,保持能链接外网和yum的可用性. 注意:yum配置项中最好:keepcache=1 2,yum install gcc, gcc-c++, make, cmake, 3, ntfs-3g wget ...

  9. HDU 5407 CRB and Candies

    题意:给一个正整数k,求lcm((k, 0), (k, 1), ..., (k, k)) 解法:在oeis上查了这个序列,得知答案即为lcm(1, 2, ..., k + 1) / (k + 1),而 ...

  10. Ubuntu14.04下Python3.4启动IDLE

    1.在Ubuntu14.04 LTS版本中,已经自行安装了python,可以在Terminal(CTRL+ALT+T)中输入:ls /usr/bin | grep python 进行查看. 如果想运行 ...