extjs建立jfreechart柱状图

Extjs4.2 Chart柱状图 Extjs4.2 Chart柱状图实例。 立即下载

1.extjs前台代码

Ext
		.onReady(function() {

			Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
			
			var dpm = 'submitter_dpm';

			var tools = [ {
				id : 'close',
				handler : function(e, target, panel) {
					panel.ownerCt.remove(panel, true);
				}
			} ];
			
			var viewport = new Ext.Viewport({
				
				listeners:{
					beforerender : function(){
						Ext.Ajax.request({
							url : '../sys_pro_stat/userAction_pro_stat_createBarChart',
							method : 'POST',
							params : {fields : dpm},
							success : function(response, options) {
							},
							failure : function(response, options) {
								Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号:'
										+ response.status);
							}
						});
					}
					
				},
						layout : 'fit',
						items : [ {
							xtype : 'portal',
							region : 'center',
							margins : '35 5 5 0',
							items : [ {
								columnWidth : .9,
								style : 'padding:10px 0 10px 10px',
								items : [ {
									title : '提案统计',
									tools : tools,
									html : '<p align="center"><img alt="提案统计" src="../sys_pro/stat/chart_dpm.jpeg"></p>'
								} ]
							} ]
						} ]
					});

		});

2.后台Java代码

public class UserAction_Stat extends UserAction {
	private Proposal proposal;
	private UserService_Stat uss;
	CategoryDataset dataset;
	String fields;
	JFreeChart chart;

	// 返回值为jfreechart导出的jpg图片的url
	public String getStatictis() throws Exception {
		return uss.getStatictis();
	}

	public void createBarChart() {
		// 1.获取数据
		dataset = getDataSet();
		// 2.构造chart
		createBarChart3D();

		// 3. 处理chart中文显示问题
		processChart(chart);

		// 4. chart输出图片,获取图片路径
		writeChartAsImage(chart);
		
	}

	

	/**
	 * 获取数据库数据
	 * */
	public CategoryDataset getDataSet() {
		DefaultCategoryDataset dataset = new DefaultCategoryDataset();
		List<Object[]> list = null;
		list = uss.loadDataFromDB(fields);
		Number value = 0;
		String rowKeys = null;
		String columnKeys = null;
		if("submitter_dpm".equals(fields)){
			rowKeys = "部门提案数";
		}else if("category".equals(fields)){
			rowKeys = "分类提案数";
		}
		for (Object[] object : list) {
			value = (Number) object[1];
			columnKeys = (String) object[0];
			dataset.addValue(value, rowKeys, columnKeys);
		}
		return dataset;
	}
	
	/**
	 * 创建图例
	 * */
	public void createBarChart3D(){
		String xtitle = null;
		if("submitter_dpm".equals(fields)){
			xtitle = "部门";
		}else if("category".equals(fields)){
			xtitle = "类别";
		}
		chart = ChartFactory.createBarChart3D("提案总数统计", // 图表标题
				xtitle, // 目录轴的显示标签
				"数量", // 数值轴的显示标签
				dataset, // 数据集
				PlotOrientation.VERTICAL, // 图表方向:水平、垂直
				true, // 是否显示图例(对于简单的柱状图必须是false)
				true, // 是否生成工具
				true // 是否生成URL链接
				);
	}

	/**
	 * 解决图表汉字显示问题
	 * 
	 * @param chart
	 */
	public void processChart(JFreeChart chart) {
		chart.setBackgroundPaint(SystemColor.controlHighlight);  
		  
        // 设置图标标题字体  
        chart.getTitle().setFont(new Font("宋体", Font.PLAIN, 20));  
  
        CategoryPlot plot = chart.getCategoryPlot();  
        // 设置横轴标题字体  
        plot.getDomainAxis().setLabelFont(new Font("宋体", Font.PLAIN, 14));  
        plot.getDomainAxis().setCategoryLabelPositions(  
                CategoryLabelPositions.UP_45);  
  
        // 设置横轴标记的字体  
        plot.getDomainAxis().setTickLabelFont(new Font("宋体", Font.PLAIN, 12));  
        // 设置横轴标记字体颜色  
        plot.getDomainAxis().setTickLabelPaint(Color.RED);  
  
        // 设置纵轴标题字体  
        plot.getRangeAxis().setLabelFont(new Font("宋体", Font.PLAIN, 14));  
  
        // 设置纵轴标记字体  
        NumberAxis3D numberAxis3D = (NumberAxis3D) plot.getRangeAxis();  
        numberAxis3D  
                .setStandardTickUnits(NumberAxis3D.createIntegerTickUnits());  
        numberAxis3D.setTickLabelPaint(Color.RED);  
  
        // 设置图例字体  
        BarRenderer3D renderer3D = (BarRenderer3D) plot.getRenderer();  
        renderer3D.setBaseLegendTextFont(new Font("宋体", Font.PLAIN, 14));  
        renderer3D.setSeriesPaint(0, Color.ORANGE);
        
        //设置数值显示在顶部
        renderer3D.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
        renderer3D.setBaseItemLabelsVisible(true);
        renderer3D.setBasePositiveItemLabelPosition(new ItemLabelPosition(ItemLabelAnchor.OUTSIDE12,TextAnchor.BASELINE_CENTER));
        renderer3D.setItemLabelAnchorOffset(10D);//设置柱形图上的文字偏离值
        
        //设置柱形图大小比例
      int k = dataset.getColumnCount();  
      if (k == 1) {  
          plot.getDomainAxis().setLowerMargin(0.26);  
          plot.getDomainAxis().setUpperMargin(0.66);  
      } else if (k < 6) {  
          double margin = (1.0 - k * 0.08) / 3;  
          plot.getDomainAxis().setLowerMargin(margin);  
          plot.getDomainAxis().setUpperMargin(margin);  
          ((BarRenderer3D) plot.getRenderer()).setItemMargin(margin);  
      } else {  
          ((BarRenderer3D) plot.getRenderer()).setItemMargin(0.1);  
      }
	}

	/**
	 * 输出图片
	 * 
	 * @param chart
	 */
	public void writeChartAsImage(JFreeChart chart) {
		String fileName = null;
		String folderName = "stat";
		String subPath = "/sys_pro/" + folderName;
		String tempJpegPath = ServletActionContext.getServletContext()
				.getRealPath(subPath);
		if("submitter_dpm".equals(fields)){
			fileName  = "chart_dpm.jpeg";
		}else if("category".equals(fields)){
			fileName = "chart_category.jpeg";
		}
		
		// 在目录下生成图片
		File file = new File(tempJpegPath + "/" + fileName);
		try {
			ChartUtilities.saveChartAsJPEG(file, chart, 800, 450);
		} catch (IOException e) {
			e.printStackTrace();
		}

	}

	// =====getter、setter====
	public UserService_Stat getUss() {
		return uss;
	}

	@Resource(name = "userServiceImp_stat_pro")
	public void setUss(UserService_Stat uss) {
		this.uss = uss;
	}
	
	public String getFields() {
		return fields;
	}

	public void setFields(String fields) {
		this.fields = fields;
	}

}


EXtjs 统计图 饼图 直方图 和折线图 Extjs 统计图 饼图 直方图 和折线图 立即下载

相关推荐

extjs—chart柱形图 例子

支持富客户端extjs技术 绚丽的报表图形

Extjs4.0 Chart的使用

0、主题 1、坐标:上、下、左、右。 坐标的类型,数字、分类... 坐标包含需要显示的坐标值,即绑定的字段 坐标值的样式,比如旋转、字体大小、格式 坐标的最大值、最小值、是否显示网格 坐标旁边显示的文字 2、图表:柱状图、饼图、区域图... 图标的类型

一切皆有联系 2万+

OCEAN 电路仿真

介绍利用 Cadence OCEAN 进行电路脚本仿真的方法

weixin_43249158的博客 4402

Extjs学习 图表Chart 序列组件详解(series)

Extjs学习 图表Chart 序列组件详解(series)

jazywoo_在路上 1657

OnePose++: Keypoint-Free One-Shot Object Pose Estimation without CAD Models

算法:首先采用LoFTR的细匹配模块,将粗匹配点周围的小窗口内,通过对比特征找到最相似的位置,细化当前特征点的位置。算法:PnP算法,利用3D点和2D投影点的对应关系,计算相机相对于物体的6D姿态(位置朝向)。算法:使用COLMAP,对2D粗匹配对(不依赖传统关键点匹配)进行特征轨迹计算并生成半稠密点云,每个3D点包含坐标和对应的2D投影点。算法:LoFTR粗匹配模块,将每一个像素点视为伪关键点,生成半稠密的2D匹配对。输入:优化后的3D、当前视图的2D特征点。输出:粗半稠密点云以及物体的特征轨迹。

雨落倾城的博客 885

【AI落地】AI生成测试用例,claude or gpt?(提效至少 50%)

gpt生成测试用例?当然好使啦,用好了提效50%+,用不好就让他变好!

青禾tester 1969

ExtJs 绘制柱状图

chart.js Ext.onReady(function() { // 定义ColumnModel var store = new Ext.data.JsonStore({ fields : ['name', 'visits', 'views'], data : [{ name : '湖北', visits : 245000,

宇宙神帝 9519

Xilinx Vitis 2020.1头文件路径配置避坑指南:解决#include找不到文件的常见问题

本文针对Xilinx Vitis 2020.1开发环境中常见的#include头文件找不到问题,提供了系统的避坑指南。文章深入解析了Vitis的头文件搜索机制,对比了通过工程属性GUI、修改编译命令及使用环境变量三种配置方法的优劣与隐藏陷阱,并给出了高级场景的排查流程与工程结构最佳实践,帮助开发者高效解决路径配置难题。

weixin_28831399的博客 571

Ext Js 3.2 柱状图应用

1:源代码 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> gridPan

张波的技术积累 9525

DFT与机器学习协同设计高效光催化剂:从电子结构到性能预测

密度泛函理论(DFT)作为计算材料学的基石,通过求解Kohn-Sham方程,能够在原子尺度精确预测材料的电子结构、能带和光学性质,为理解光催化等能源材料的微观机理提供了关键视角。其核心价值在于替代传统试错法,实现材料性能的理性设计与机理揭示。在工程实践中,面对高通量筛选的需求,机器学习(ML)技术,特别是长短期记忆网络(LSTM)这类擅长处理序列数据的模型,能够学习从材料描述符到复杂性能(如光谱)的映射关系,实现快速性能预测与优化。这种DFT与ML的结合范式,正广泛应用于新能源材料、半导体器件等领域,用于高

weixin_30662937的博客 661

Zemax 中的 LED 阵列模型

这些光线是所有光线的子集,用于布局可视化,而不是详细分析。X 和 Y 散度(αx 和 αy)以度为单位,以不同的方式设置为 6 度和 12 度。每个 LED 都以朗伯模式(广角分布)发光,尽管有些 LED 具有内置光学元件,用于更窄或更聚焦的光束。,具体取决于这些类别中使用的半导体材料。LED 阵列由多个发光二极管 (LED) 组成,这些二极管以特定模式或配置排列,以实现均匀照明、更高强度或特定照明特性。如果数据的存在更改为“辐射强度”,则它以弧度为单位显示每个立体角的功率,作为探测器上入射角的函数。

jkh920184196的博客 1595

【ExtJs】柱状图,改变每条柱子的颜色

ExtJs的柱状图的画法其实与《【ExtJs】折线图》(点击打开链接)的画法几乎完全一样,难点在于各个柱子的颜色。ExtJs对于柱状图的颜色,并没有单独为其开放独立的参数。因此还是与《【ExtJs】表格控件Grid的增删改查,利用renderer让操作列actioncolumn使用文字而不是图标》(点击打开链接)一样,要自己单独设置东西,必须使用到渲染器。如果不设置,它画出来的柱状图,每次都是同样

编程记录,亲测有效 3820

别再死记硬背参数了!手把手教你用Fluent欧拉模型搞定流化床模拟(附颗粒粘度/体积分数设置详解)

本文深入解析Fluent欧拉模型在流化床模拟中的应用,重点讲解颗粒粘度和体积分数等关键参数的设置原理与科学方法。通过对比不同模型(如Syamlal-O'Brien、Gidaspow)的适用场景,帮助工程师摆脱参数死记硬背,实现精准模拟。内容涵盖相间作用机制、求解策略优化及结果验证,为化工、能源领域的流化床模拟提供实用指南。

weixin_42656416的博客 429

Extjs学习 图表Chart 使用主题样式

Extjs学习 图表Chart 使用主题样式

jazywoo_在路上 1158

5.1 滑模控制(SMC)及其改进

本文系统阐述了滑模控制(SMC)的基本原理及其在永磁同步电机(PMSM)控制系统中的应用。首先介绍了滑模控制的核心思想,包括滑模面设计和不连续控制律,其强鲁棒性使其在电机控制领域得到广泛应用。其次分析了SMC在PMSM速度控制器和无位置传感器观测器中的具体实现方案。重点探讨了SMC固有的抖振问题,详细比较了边界层法、高阶滑模和自适应方法等多种改进策略的优缺点。最后指出改进SMC的研究趋势是多种策略的融合应用,如自适应高阶滑模等,以在保持鲁棒性的同时有效抑制抖振。

技术工作者 1449

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Echarts 柱状图 多条柱子 颜色 宽度 标题

Echarts 柱状图 多条柱子 颜色 宽度 标题 柱状图 背景线条不要 柱子中间不要有空格 图例右边 标识右边

123po 8738

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

EXTJS 4 chart图表样式汇总

theme: 'Category1' theme: 'Category2' theme: 'Category3' theme: 'Category4' theme: 'Category5' theme: 'Category6' theme: 'base' theme: 'Green' theme

u013127751的博客 1949

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

extjs的chart系列

extjs中的chart的label: { contrast : true, display: 'outside', "text-anchor": 'middle', field: 'temperature', //renderer: E...

潇湘夜雨 323

ExtJs_chart示例

/* 线型图 * Ext JS Library 3.3.0 */Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';Ext.onReady(function(){    var store = new Ext.data

cenyebao的专栏 1万+

实在无助开播求指导。extjs柱状图柱子的大小怎么设置。

由于突击进入项目中,使用的是未曾

zhangwei89的专栏 1588

EXTjs开发————优雅的用extjs写一个柱状图

简单的写法,extjs可以直接引用插件来写,这里将我发表在百度文库的文档简述下来,有兴趣也可以关注我的百度文库,ID:该用户已失踪。 主要部分的代码: $(document).ready(function(){ var myChart2 = echarts.init(document.getElementById('myChart2')); var option = { ...

沉默的小猴子的博客 1181

Extjs 制作柱状图

在JSP页面制作柱状图,可以根据数据的变化动态实时的变化 主要是使用EXTJS自带的插件达到效果 Ext.require('Ext.chart.*'); Ext.require([ 'Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox' ]); 然后编...

weixin_30402085的博客 338

ExtJS图表

1.1 学习技能点 本次在线学习将学习以下知识技能:Ø 柱状图Ø 饼状图Ø 折线图1.2 学习任务ExtJS3使用的Flash Chart来源于YUI,其中包括柱状图、饼状图等多种图表,这些图表可以与ExtJS组件完美整合,不仅可以在Panel中显示图表,还可以通过Store为图表提供数据。1.2.1 任务1:使用柱状图统计每月的访问人数需求说明首先定义一个JsonStroe为我们要实现的图表提供

张晨光老师的播客 2070
上一篇: extjs表格单元双击弹窗编辑grid和form互相传值
下一篇: extjs导出Excel文档
冷静BB
博客等级 码龄12年 298粉丝 112原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值