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. Building Xcode iOS projects and creating *.ipa file from the command line

    For our development process of iOS applications, we are using Jenkins set up on the Mac Mini Server, ...

  2. poj 3368 Frequent values（RMQ）

    题目:http://poj.org/problem?id=3368 题意:给定n个数,顺序为非下降,询问某个区间内的数出现最多的数的 出现次数.. 大白书上的 例题..算是RMQ变形了, 对 原数组重 ...

  3. iOS开发：告诉git不要跟踪UserInterfaceState.xcuserstate

    在xcode中使用git管理项目的技巧: 在多人协作开发的时候,每个开发者都会在项目中的某个目录生成一个 UserInterfaceState.xcuserstate 文件,这个文件大概每5s会刷新一 ...

  4. Vagrant工具

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史. 我们可以通过 Va ...

  5. Android设置布局背景为白色的三种方法

    一.在xml文件里可以直接设置: android:background="#ffffff" 其他颜色可以看这里;http://blog.csdn.net/yanzi1225627/ ...

  6. highcharts 柱状图动态设置数据应用实例

    <div id="container" style="min-width:700px;height:400px"></div> #jav ...

  7. Nginx - webbench压力测试

    1. 下载,安装,进目录. 2. 执行:webbench -t 10 -c 1000 http://192.168.1.44/ (我开的nginx,默认端口80,直接处理了) 结果分析: Webben ...

  8. 【MySQL】MySQL for Mac 环境变量的配置

    昨天刚入的MacBookPro中配.目前已经深深爱上不能自拔. 各种快捷键.终端命令.各种编译器.系统偏好等,感觉压力好大,要学的东西好多. 入正题,项目需要MySQL,安装按照官网下载就没问题. 但 ...

  9. 【原】cocos2d-x 2.0.4 不支持https协议 CURLE_UNSUPPORTED_PROTOCOL

    我们项目组用的cocos2d-x版本还比较老,各种好的功能不能用. 今天就让我遇到一个问题,使用CCHttpClient发送http请求的时候,https协议的不支持,返回失败信息如下 errorco ...

  10. SQL对Xml字段的操作

    转:http://www.cnblogs.com/youring2/archive/2008/11/27/1342288.html T-Sql操作Xml数据 一.前言 SQL Server 2005 ...