ext4.0绘制chart（柱状图，条形图）

最新推荐文章于 2024-12-26 17:16:29 发布
最新推荐文章于 2024-12-26 17:16:29 发布
阅读量217 收藏
点赞数
文章标签： xhtml java json

Jsp代码
  1. <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
  2. <%
  3. Stringpath=request.getContextPath();
  4. StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  7. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
  9. <head>
  10. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  11. <linkrel="stylesheet"type="text/css"href="<%=basePath%>ext-4.0/resources/css/ext-all.css"/>
  12. <scripttype="text/javascript"src="<%=basePath%>ext-4.0/bootstrap.js"></script>
  13. <scripttype="text/javascript"src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
  14. <linkhref="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>
  15. <linkhref="<%=basePath%>css/core.css"rel="stylesheet"type="text/css"media="screen"/>
  16. <linkhref="<%=basePath%>css/style.css"rel="stylesheet"type="text/css"media="screen"/>
  17. <scriptsrc="<%=basePath%>js/jquery/jquery-1.3.2.min.js"type="text/javascript"></script>
  18. <scripttype="text/javascript">
  19. Ext.onReady(function(){
  20. Ext.create('Ext.panel.Panel',{
  21. title:'3天内特大重大故障饼状图',
  22. width:500,
  23. height:500,
  24. renderTo:'div1',
  25. layout:'card',
  26. items:[{
  27. xtype:'chart',
  28. store:{
  29. fields:['platName','ratio','level','troubleLevel'],
  30. proxy:{
  31. type:'ajax',
  32. url:'<%=basePath%>reports/3dayAgo.action',
  33. reader:{
  34. type:'json',//Ext.data.reader.Json解析器
  35. root:'reportLs'
  36. }
  37. },
  38. autoLoad:true
  39. },
  40. animate:true,//是否启用动画效果
  41. legend:{
  42. position:'bottom'//图例位置
  43. },
  44. shadow:true,
  45. series:[{
  46. type:'pie',//图表序列类型
  47. field:'ratio',//对应饼状图角度的字段名
  48. showInLegend:true,//是否显示在图例当中
  49. //colorSet:['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色配置
  50. donut:20,//麦圈图中空部分半径
  51. label:{
  52. field:'platName',//标签字段名
  53. contrast:true,
  54. color:'#FFFF00',
  55. renderer:function(v){//自定义标签渲染函数
  56. return"["+v+"]";
  57. },
  58. display:'middle',//标签显现方式
  59. font:'18px"LucidaGrande"'//字体
  60. },
  61. highlight:{
  62. segment:{
  63. margin:10//空白区域宽度
  64. }
  65. },
  66. tips:{
  67. trackMouse:true,//是否启用鼠标跟踪
  68. width:50,
  69. height:28,
  70. renderer:function(storeItem){//自定义渲染函数
  71. vartitle=storeItem.get('ratio')+'%';
  72. this.setTitle(title);
  73. }
  74. }
  75. }]
  76. }]
  77. });
  79. vardataStore=newExt.data.JsonStore({
  80. fields:['ageRange','proportion','growing'],
  81. data:[
  82. {ageRange:'小于30岁',proportion:10,growing:35},
  83. {ageRange:'30-40岁',proportion:40,growing:30},
  84. {ageRange:'40-50岁',proportion:30,growing:30},
  85. {ageRange:'50岁以上',proportion:20,growing:30}
  86. ]
  87. });
  88. Ext.create('Ext.panel.Panel',{
  89. title:'3天内特大重大故障条形图',
  90. width:500,
  91. height:500,
  92. renderTo:'div2',
  93. layout:'card',
  94. items:[{
  95. xtype:'chart',
  96. store:{
  97. fields:['troubleName','size'],
  98. proxy:{
  99. type:'ajax',
  100. url:'<%=basePath%>reports/3dayAgo2.action',
  101. reader:{
  102. type:'json',//Ext.data.reader.Json解析器
  103. root:'repBeans'
  104. }
  105. },
  106. autoLoad:true
  107. },
  108. axes:[{
  109. type:'Numeric',
  110. position:'left',
  111. minimum:0,//数轴最小值
  112. maximum:5,//数轴最大值
  113. //fields:['size','size'],//同时展示2个数据
  114. title:'故障次数'
  115. },{
  116. type:'Category',
  117. position:'bottom',
  118. fields:['troubleName'],
  119. title:'平台级别'
  120. }],
  121. legend:{
  122. position:'bottom'//图例位置
  123. },
  124. series:[{
  125. type:'column',
  126. axis:'left',
  127. xField:['troubleName'],//x轴字段
  128. yField:['size'],//y轴字段
  129. title:['3天内故障发生次数'],//配置图例字段说明
  130. label:{
  131. field:['size'],//标签字段名
  132. display:'outside',//标签显现方式
  133. font:'12px"LucidaGrande"',//字体
  134. renderer:function(v){//自定义标签渲染函数
  135. returnv+'次';
  136. }
  137. }
  138. }]
  139. }]
  140. });
  141. });
  142. </script>
  143. </head>
  144. <body>
  145. <divstyle="float:left;padding-left:10px"id="div1"></div>
  146. <divstyle="float:right;padding-right:10px"id="div2"></div>
  147. </body>
  148. </html>
  150. <scripttype="text/javascript">
  151. $(function(){
  152. //alert($(document).height());
  153. h=$(document).height()-64;
  155. $("#form").css("height",h);
  156. });
  157. </script>
phantomes
关注
java 从hadoop hdfs读取文件 进行groupby并显示为条形图
Xmo_jiao的博客
05-21 1215
java 从hadoop hdfs读取文件 进行groupby并显示为条形图 题意：从文件、网络或者数据库中读取数据（格式自定、数据自定），显示统计结果（包括图形两种以上），用户界面自定 有兴趣使用的，请点源代码与数据下载链接1 读取数据1.1准备数据此数据为TPCH基准测试集中lineitem.tdl文件中前25行 示例：第一行如下 1|1552|93|1|17|24710.35|0.04|0
ext4.0生成图形报表（柱形、折线、饼状）
04-20
一个用ext4.0实现的图形报表，更具界面列表数据，自动生成图形报表，包括柱形图，折线图，饼状图。
extjs—chart柱形图 例子
12-16
支持富客户端extjs技术 绚丽的报表图形
第 2 章 震撼吧！让你知道ext表格控件的厉害。
飞鸟Blog
01-06 2514
2.1. 功能丰富，无人能出其右 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑grid，添加新行，
extjs图表绘制之条形图实现方法分析
11-20
在EXTJS中，绘制条形图是通过EXTJS的Charts组件来实现的，这使得开发者可以创建各种复杂的可视化图表，包括条形图。在本文中，我们将深入探讨如何使用EXTJS实现条形图，以及如何实现一些特定的功能，如动态数据、...
ExtJS实现JSON数据条形图展示教程
ExtJS提供了不同类型的图表组件，比如`Ext.chart.Chart`，它可以用来创建柱状图、折线图、饼图等。通过配置这些组件的`series`和`axes`属性，可以轻松地定义图表的数据来源和表现形式，从而实现条形图。 ### 文件...
《Python宝藏库大揭秘：10类重要的Python库解析》：此文为AI自动生成
最新发布
zheng_ruiguo的专栏
12-26 3211
《Python宝藏库大揭秘：10类重要的Python库解析》
Extjs4.2 Chart柱状图
02-24
Extjs4.2 Chart柱状图实例。
用Qt绘制柱状图
11-01
最近复习已经学习的Qt知识，制作了一个简单的图表显示工具。目前它能够很好地显示柱状图。 这个柱状图支持任意多的项目（柱子），只需要在代码中添加了相关数据后，使用Paint()函数就可以将其渲染成一个Pixmap，然后作为中央控件（centeral widget）的一张图片显示出来。
Qt QChart 绘制饼状图、曲线、条形图，并保存曲线图形
06-13
QChart 绘制饼状图、曲线、条形图，并保存曲线图形
Qt 柱状图绘制
03-21
对柱状图的绘制进行封装，通过类函数setValue进行传值，根据所传的值的大小绘制不同高度的柱状图，并在柱状图顶部显示具体数值，纵坐标标有刻度，功能实现简单明了，工程文件下载即可运行。
Qt开发之QtCharts柱形图绘制
03-23
Qt开发之QtCharts柱形图绘制
EXT4.0饼图和柱形图的创建
优快云STJ的专栏
12-08 947
1. store00001:Ext.create('Ext.data.Store', {         id : "mystore111",         proxy: {             type : "ajax",             url : "/doselect13",             reader: {                 type :
extjs4实现双纵坐标柱形图
xianrake922的专栏
11-05 748
代码： Ext.onReady(function () {   var store1 = new Ext.data.JsonStore({           fields: ['data1', 'data2', 'name'],           data: [               {data1: 25, data2: 100, name: 'atrwettrrret'},
EXT根据数据绘制chart柱状图和饼图，动态改变坐标轴
hustchenshu的专栏
04-29 1699
首先说明引用背景：需要通过柱状图或者饼图来比较多个公司在营业额、研发投入、产量、等方面的数据，由于比较的方面较多，不能够一次在图表中全部显示，如下图： 若需要比较的数据只有3到5个则可以如下实现，但是当比较项有十几个甚至上百的话就不能这样实现了； 思路：通过一个combobox来实现动态切换比较类目，即该表chart的axes以及series 实现如下： fields是所有字段名称
Qt BarChart实践
weixin_30438813的博客
02-06 313
按照帮助文档编写 运行截图 上代码 #include "widget.h" #include "ui_widget.h" Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); QB...
QT 柱形图(简易)
Foreigner_Y的博客
01-19 1266
QT 柱形图(简易)。QT想实现一个柱形图可以显示范围，我原以为QT会自带这个控件，结果没有..... 百度了一下，网上的都太过复杂，搞起来太费劲，我自己想了一个简单方式实现，效果如图： 都是一些QT基本控件拼凑而成，两个柱形是两个label，黑色的刻度是QT的(线段控件)，右边的数字当然也是label。其中精髓的是黄色部分，它其实是label的一个边界属性，下边界，上左右边界设置为none，边界颜色设置为黄色，边界宽度任意调整就实现了在柱形图中不同范围。 这是右边label中的内容： 当然..
Ext4.0实现柱形折线饼状图形报表自动生成
- 实例化ext4.0中的图表组件，并展示如何通过配置参数来自动生成柱形图、折线图和饼状图。 - 关注点可能包括数据绑定、图表配置选项、交互功能以及与其他Web组件的集成。 ### 压缩包子文件的文件名称列表：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值