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. HDU 1078 FatMouse and Cheese【记忆化搜索】

    题意:给出n*n的二维矩阵,和k,老鼠每次最多走k步,问老鼠从起点(0,0)出发,能够得到的最大的数(即为将每走过一点的数都加起来的和最大)是多少 和上一题滑雪一样,搜索的方向再加一个循环 #incl ...

  2. Android基础_3 Activity相对布局

    相对布局要比前面讲的线性布局和表格布局要灵活一些,所以平常用得也是比较多的.相对布局控件的位置是与其周围控件的位置相关的,从名字可以看出来,这些位置都是相对的,确定出了其中一个控件的位置就可以确定另一 ...

  3. BZOJ 1861 书架

    (╯-＿-)╯╧╧ 此处为错误代码. #include<iostream> #include<cstdio> #include<cstring> #include& ...

  4. [反汇编练习] 160个CrackMe之019

    [反汇编练习] 160个CrackMe之018. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. Web API入门指南(安全)转

    安全检测的工具站点:https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools Web API入门指南有些朋友回复问了些 ...

  6. ffmpeg 从内存中读取数据（或将数据输出到内存）

    更新记录(2014.7.24): 1.为了使本文更通俗易懂,更新了部分内容,将例子改为从内存中打开. 2.增加了将数据输出到内存的方法. 从内存中读取数据 ffmpeg一般情况下支持打开一个本地文件, ...

  7. Windows下FFmpeg快速入门

    本系列文章导航 Windows下FFmpeg快速入门 ffmpeg参数解释 mencoder和ffmpeg参数详解(Java处理视频) Java 生成视频缩略图(ffmpeg) 使用ffmpeg进行视 ...

  8. Delphi 编译错误信息表

    ; not allowed before ELSE ElSE前不允许有“;” <clause> clause not allowed in OLE automation section 在 ...

  9. solr4.2 solrconfig.xml配置文件简单介绍

    对于solr4.x的每个core有两个很重要的配置文件:solrconfig.xml和schema.xml,下面我们来了解solrconfig.xml配置文件. 具体很详细的内容请细读solrcofi ...

  10. K2 blackpearl 流程开发(一)

    转:http://blog.csdn.net/gxiangzi/article/details/8444060 郁闷,今天K2的license过期了,很多东西都没法用了,还得去找PM大大帮忙申请一个. ...