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. （转）博弈问题与SG函数

    博弈问题若你想仔细学习博弈论,我强烈推荐加利福尼亚大学的Thomas S. Ferguson教授精心撰写并免费提供的这份教材,它使我受益太多.(如果你的英文水平不足以阅读它,我只能说,恐怕你还没到需要 ...

  2. Java Web编程的主要组件技术——Struts核心组件

    参考书籍:<J2EE开源编程精要15讲> Struts配置文件struts-config.xml Struts核心文件,可配置各种组件,包括Form Beans.Actions.Actio ...

  3. 查看tablespace实际使用量和剩余空间

    到某表空间所有段的加和值,即按表空间分组统计dba_data_files.bytes-dba_free_space.bytes=dba_segments.bytesdba_segments中可查询已分 ...

  4. VS2010开发2dx无法解析的外部符号解决记录

    首先新建HelloWorld项目... 想使用Cocos2d扩展包需要引入相关头文件,如:#include “cocos-ext.h”...接下来我们右键工程属性->配置属性->c/c++ ...

  5. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  6. 最好最实用的PHP二次开发教程

    ◆二次开发 1.什么是二次开发? 二次开发,简单的说就是在现有的软件上进行定制修改,功能的扩展,然后达到自己想要的功能和效果,一般来说都不会改变原有系统的内核. 2.为什么要二次开发? 随着信息化技术 ...

  7. codeforces 675E Trains and Statistic 线段树+贪心统计

    分析:这个题刚看起来无从下手 但是我们可以先简化问题,首先可以固定起点i,求出i+1到n的最小距离 它可以到达的范围是[i+1,a[i]],贪心的想,我们希望换一次车可以到达的距离尽量远 即:找一个k ...

  8. 《Python基础教程（第二版）》学习笔记 -> 第七章 更加抽象

    对象的魔力 多态:意味着可以对不同类的对象使用同样的操作: 封装:对外部世界隐藏对象的工作细节: 继承:以普通的类为基础建立专门的类对象 多态① 多态和方法绑定到对象特性上面的函数称为方法(metho ...

  9. web自动化框架之四测试报告的搭建

    现状: 看过前面的文章,楼主用的是python,所以在搭建测试报告这块的时候使用的是unittest+htmlTestRunner:然后发现生成出来的报告,总是有那么不完美的地方,比如想增加图片,比如 ...

  10. [转]JQuery.Ajax之错误调试帮助信息

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...