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. word引用错误

    错误 4317 无法嵌入互操作类型“Microsoft.Office.Interop.Word.ApplicationClass”.请改用适用的接口. 类型“Microsoft.Office.Inte ...

  2. linux 压缩/解压命令大全

    .tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...

  3. Jqgrid入门-操作表格的数据(二)

    上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据.           jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jq ...

  4. 50个python库

    50个很棒的Python模块,包含几乎所有的需要:比如Databases,GUIs,Images, Sound, OS interaction, Web,以及其他.推荐收藏. Graphical in ...

  5. Android开发时提示Your project contains error(s),please fix them be

    有次在使用eclipse写好Android的代码,代码没有报错.然后 想在AVD中运行测试时,总是会弹出错误框,提示信息为:    “Your project contains error(s),pl ...

  6. datatables使用总结篇

    <!doctype html> <html> <head> <meta charset="gbk"/> <meta name= ...

  7. 最简单的视音频播放示例8：DirectSound播放PCM

    本文记录DirectSound播放音频的技术.DirectSound是Windows下最常见的音频播放技术.目前大部分的音频播放应用都是通过DirectSound来播放的.本文记录一个使用Direct ...

  8. 怎样查看Eclipse是32位还是64位

    首先进入到Eclipse的安装目录,如下图:   查找到文件名为"eclipse.ini" 文件,使用文本编辑工具,或记事本打开,如下图: 如图中的红框所示,如果是win32.x8 ...

  9. js时间日期转时间戳

    var contractstarttimea='2016-01-01'; var contractendtimea='2016-05-01'; var contractstart = Date.par ...

  10. ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表（五）

    jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示 ...