Ext JS 3.4 创建多条折线图

最新推荐文章于 2024-06-28 16:18:58 发布
最新推荐文章于 2024-06-28 16:18:58 发布
阅读量8.3k 收藏 3
点赞数
分类专栏： EXTJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deng11342/article/details/9314125
版权 
	var zxstore = new Ext.data.JsonStore({
        fields:['name', 'visits', 'views'],
        data: [
            {name:'Jul 07', visits: 245000, views: 300000},
            {name:'Aug 07', visits: 240000, views: 350000},
            {name:'Sep 07', visits: 355000, views: 400000},
            {name:'Oct 07', visits: 375000, views: 420000},
            {name:'Nov 07', visits: 490000, views: 450000},
            {name:'Dec 07', visits: 495000, views: 580000},
            {name:'Jan 08', visits: 520000, views: 600000},
            {name:'Feb 08', visits: 620000, views: 750000}
        ]
    });

    // extra extra simple
    var ndtjPanel =  new Ext.Panel({
        title: '仪器状态折线图',
//        renderTo: 'container',
        width:500,
        height:300,
        layout:'fit',

        items: {
            xtype: 'linechart',
            store: zxstore,
            url: BasicUrl + '/ext/resources/charts.swf',  
            xField: 'name',
//            yField: 'visits',
            
            series:[  
		                {type:'line',displayName:'真实值1',yField:'visits',style:{color:0x0033FF}},  
		                {type:'line',displayName:'其他',yField:'views',style:{color:0x66CC00}}  
		            ],  
		            
		     extraStyle:  
		            {  
		                legend:  
		                {  
		                    display: 'bottom',  
		                    padding: 5,  
		                    font:  
		                    {  
		                        family: 'Tahoma',  
		                        size: 13  
		                    }  
		                }  
		            },         
            
			listeners: {
				itemclick: function(o){
					var rec = store.getAt(o.index);
					Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
				}
			}
        }
    });

效果图如下:


之后 需要动态的确定折线的条数.
做了稍许改动.仅供参考.笨人的笨办法 呵呵.
后台代码 
@RequestMapping(method = RequestMethod.POST, params = "cmd=getConditionListZheXian" )
	public String getConditionList( Model model , HttpServletRequest request , HttpServletResponse response){
   List<Map> records = new ArrayList<Map>();
		
		Map map00 = new HashMap();
		map00.put("name", "0月");
		map00.put("num1" , 3500);
		map00.put("num2" , 3000);
		map00.put("num1name" , "CAXX");
		map00.put("num2name" , "BAXX");
		
		Map map1 = new HashMap();
		map1.put("name", "一月");
		map1.put("num1" , 3500);
		map1.put("num2" , 3000);
		map1.put("num1name" , "CAXX");
		map1.put("num2name" , "BAXX");
		
		Map map2 = new HashMap();
		map2.put("name", "二月");
		map2.put("num1" , 2000);
		map2.put("num2" , 1500);
		map2.put("num1name" , "CAXX");
		map2.put("num2name" , "BAXX");
		
		Map map3 = new HashMap();
		map3.put("name", "三月");
		map3.put("num1" , 1500);
		map3.put("num2" , 2000);
		map3.put("num1name" , "CAXX");
		map3.put("num2name" , "BAXX");
		
		Map map4 = new HashMap();
		map4.put("name", "四月");
		map4.put("num1" , 3500);
		map4.put("num2" , 3000);
		map4.put("num1name" , "CAXX");
		map4.put("num2name" , "BAXX");
		
		Map map5 = new HashMap();
		map5.put("name", "五月");
		map5.put("num1" , 4500);
		map5.put("num2" , 4000);
		map5.put("num1name" , "CAXX");
		map5.put("num2name" , "BAXX");
		

		records.add(map00);
		records.add(map1);
		records.add(map2);
		records.add(map3);
		records.add(map4);
		records.add(map5);
		
		
		model.addAttribute("root", records);

}

前台主要JS函数:
/**
     * 折线store
     */
    var storeZheXian = new Ext.data.Store({  
			            url : BasicUrl + "/InstrumentCondition.htm?cmd=getConditionListZheXian",  
			            reader : new Ext.data.JsonReader({
					fields:['name','num0','num0name','num1','num1name','num2','num2name','num3','num3name','num4','num4name','num5','num5name'],
					root : "root"
								}),
						// autoLoad:true,
						remoteSort : true
						,listeners :{
						
							load : function(){
								var recordcount = storeZheXian.getCount();
								
								//配置折线图
								var series = new Array();
								
								if(recordcount > 0){
										
									var record = storeZheXian.getAt(0);
									
									var num0 = record.get('num0');
									if(  num0 != null && num0 != '' && num0 != ' ' +  num0 != undefined  ){
									     	var ser = {};
									     	ser.type = 'line';
									     	ser.displayName = record.get('num0name');
										ser.yField = 'num0';
										ser.style = {color:0xCC0000};
												
										series.push(ser);
									}
										
									var num1 = record.get('num1');
									if(  num1 != null && num1 != '' && num1 != ' ' +  num1 != undefined  ){
										var ser = {};
										ser.type = 'line';
										ser.displayName = record.get('num1name');
										ser.yField = 'num1';
										ser.style = {color:0xFFCC00};
												
										series.push(ser);
									}
									var num2 = record.get('num2');
									if(  num2 != null && num2 != '' && num2 != ' ' +  num2 != undefined  ){
										var ser = {};
										ser.type = 'line';
										ser.displayName = record.get('num2name');
										ser.yField = 'num2' ;
										ser.style = {color:0x99CC00};
												
										series.push(ser);
									}
									var num3 = record.get('num3');
									if(  num3 != null && num3 != '' && num3 != ' ' +  num3 != undefined  ){
										var ser = {};
										ser.type = 'line';
										ser.displayName = record.get('num3name');
										ser.yField = 'num3';
										ser.style = {color:0x0033FF};
												
										series.push(ser);
									}
									var num4 = record.get('num4');
									if(  num4 != null && num4 != '' && num4 != ' ' +  num4 != undefined  ){
										var ser = {};
										ser.type = 'line';
										ser.displayName = record.get('num4name');
										ser.yField = 'num4';
										ser.style = {color:0x66CC00};
												
										series.push(ser);
									}
									var num5 = record.get('num5');
									if(  num5 != null && num5 != '' && num5 != ' ' +  num5 != undefined  ){
										var ser = {};
										ser.type = 'line';
										ser.displayName = record.get('num5name');
										ser.yField = 'num5';
										ser.style = {color:0xCCFF00};
												
										series.push(ser);
									}
										
								}
								
								Ext.getCmp("charID").setSeries(series);
								
								
								}
							
						}
			        });
  // 折线图空间存放在 panl 里面
    var ndtjPanel =  new Ext.Panel({
        title: '仪器状态折线图',
        width:500,
        height:300,
        layout:'fit',

        items: {
            xtype: 'linechart',
            id: 'charID',
            store: storeZheXian,
            url: BasicUrl + '/ext/resources/charts.swf',  
            xField: 'name',
//这里注释了在加载store的时候 动态赋值
//          yField: 'visits',
//          series:[  
//		                {type:'line',displayName:'真实值1',yField:'views',style:{color:0x0033FF}},  
//		                {type:'line',displayName:'其他',yField:'visits',style:{color:0x66CC00}}  
//		            ],  
		            
		     extraStyle:  
		            {  
		                legend:  
		                {  
		                    display: 'bottom',  
		                    padding: 5,  
		                    font:  
		                    {  
		                        family: 'Tahoma',  
		                        size: 13  
		                    }  
		                }  
		            },         
            
			listeners: {
				itemclick: function(o){
					var rec = store.getAt(o.index);
					Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
				}
			} 
			
        	
        	
        }
    });

效果图如下:





小结:  由于项目任务比较赶,所以比较粗糙,仅供参考. 这里折线的数组 series 在 store加载完成之后 进行动态赋值. 其实 fields 也可以动态给值,但是 时间紧没有去弄,我这里实现了 前台显示1 - 6 条折线的功能.

deng11342
关注
专栏目录
JFreeChart图像报表教程
litlit023的专栏
12-20 1136
文章转自--http://blog.csdn.net/qiailin/article/details/6111281 jfreechart是jfree公司提供的一个java项目，它主要用来实现各种图表，包括：饼图，柱状图（普通柱状图和堆栈柱状图），折线图，区域图，分布图，混合图，甘特图，以及一些仪表盘等。 官方网站：http://jfree.org/。 pie 饼图，line折线图，ba
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
ExtJS制作折线图
06-15
ExtJS 折线图 lineChart，前台的内容由后台传入，可支持任意多条折线图。
extjs3.3 多条折线图展示
cts529269539的专栏
01-07 778
最近项目上需要做一些简单的图表，考虑到图表并不复杂加上前台页面上大多用Ext，所以我决定这些简单的图表就用Ext自带的chart来完成。 piechart，我就不细说了，网上有很多例子，在这里重点说一下折线图linechart 17jquery.com Ext自带的折线图跟GridPanel类似，需要在页面上写义好相关列（GridPanel定义columnModel,linechart定义
用Vue3和Plotly.js生成多折线图
最新发布
ScriptEcho的博客
06-28 436
本代码示例展示了如何使用 Plotly.js 库创建交互式折线图。用户可以在图中点击点以添加注释，从而实现数据可视化和探索。此功能可广泛应用于数据分析、科学研究和教育等领域。使用 Plotly.js 绘制三条折线图，每条线对应一个数据集。当用户点击图中的点时，会在该点处添加一个注释，显示点的 x 和 y 坐标。用户可以点击多个点，在图中添加多个注释。开发这段代码的过程让我深入了解了 Plotly.js 库和交互式图表绘制的技术。
Ext写的一个折线图
Dream_Mr.wang的专栏
10-09 3445
先看一下效果图： 现在显示的是三条曲线，可以通过修改TipsChart.js来实现线的条数，运用Ext，首先需要的就是引入Ext中的相关文件，这个就不提了，相信对Ext有所了解的都知道需要引那几个文件 下面贴上代码： index.jsp------------------------------ <% String path = request.getContextPath(
【ExtJs】折线图
编程记录，亲测有效
05-03 3752
ExtJs在ExtJs4之后，包含4则推出了图表功能，虽然图表功能可以通过其余JQuery插件实现，例如《【jQuery】兼容IE6的图表插件Highcharts》（点击打开链接），但是这个ExtJs的图表插件也很优秀，至少一些常见的图表也是不虚的。 一、基本目标 画出如下的折现图： 二、制作过程 首先，ExtJs绘制图表的项目，与《【ExtJs】与后台数据库交互的
Ext 折线图
03-26
NULL 博文链接：https://qq1988627.iteye.com/blog/1167483
Ext Js权威指南(.zip.001
09-26
Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...
金融科技、区块链、人工智能——金融科技、区块链、人工智能的最新进展迫使我们掌握最新技术
程序员光剑
07-31 2883
虽然市场上已经有了很多关于金融、经济、管理学、计算机科学、生物学、化学、地球科学等方面的科普文章、教程、杂志，但还没有一篇真正聚焦于当前最热门的金融、技术、产业变革领域的专业文章。随着互联网的快速发展和产业的变革，我们对于传统行业的认识正在发生着巨大的变化。在这个变革的时代背景下，互联网、人工智能、区块链、云计算等新兴技术正在引起我们的关注。人们越来越多地参与到这类创新领域的讨论中，而相关的研究报告和论文却鲜少涉及这些领域。
JFreeChart图像报表教程- 带图
热门推荐
A Blog Just For Qiailin
01-01 1万+
<br />jfreechart是jfree公司提供的一个java项目，它主要用来实现各种图表，包括：饼图，柱状图（普通柱状图和堆栈柱状图），折线图，区域图，分布图，混合图，甘特图，以及一些仪表盘等。<br />官方网站：http://jfree.org/。<br />pie 饼图，line折线图，bar柱状图，gantt甘特图，xy plots and scatter plots，timer series, high/low/open/close charts and candle stick chart
ExtJs双折线图
03-23
NULL 博文链接：https://mzl-2011.iteye.com/blog/1035567
extjs4图表绘制之折线图实现方法分析
11-20
本文实例讲述了extjs4图表绘制之折线图实现方法。分享给大家供大家参考，具体如下： 本篇文章将介绍extjs中自带的图表 在本次案例中，提供一下功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年各个月中人数。 请看下面代码： Ext.define('ChartLineTest', { extend: 'Ext.panel.Panel', autoScroll : true, selectYear:null,//定义年份 initComponent: function () {//定义初始化组件 var me = this; me.sto
extjs 双折线图实现
youshini的专栏
11-20 2591
1 建立一个chart的html文件，即chart.htmlhtml>head>title>charttitle> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> link rel="stylesheet" type="text/css" href="ExtJs/resources
EXT创建动态的折线图
丶十三少丶
12-05 243
&lt;a href="http://m.kuaidi100.com" target="_blank"&gt;快递查询&lt;/a&gt;                           欢迎转载，转载请注明出处,谢谢 本插件是在Ext 3.x上开发完成的 最近项目上需要做一些简单的图表，考虑到图表并不复杂加上前台页面上大多用Ext，所以我决定这些简单的图表就用Ext自带的chart来...
EXT3绘制折线图
卧龙居
08-06 3630
最近在做一个医院的项目，需要出一个年度统计图，考虑用EXT做。 需要的效果如图所示： 那么，肯定得有个store，data应该从数据库中取，不过这里做范例用，我们就写死了。 //年度统计的折线图 var ndtjStore = new Ext.data.JsonStore({ fields:['name','num1','num2','num3','num4'],
extjs折线图实现求助
cxwwl的博客
12-04 166
页面代码如下： Ext.onReady(function() { //创建一个Store var store = Ext.create('Ext.data.JsonStore', { fields : ['date','price1','price2','price3','price4'], proxy:{ type:'ajax', url:'chartSearch', ...
functioncharts与extjs结合，做多折线图
iteye_18833的博客
11-17 109
1.引用相应的包FusionCharts.js 2.编辑相应的XML格式字符串 var xml = "&lt;?xml version='1.0' encoding='UTF-8'?&gt;" + "&lt;chart caption='' yAxisName='温度值' xAxisName='周期'" + "bgColor='' bgAlpha='50' bgRatio='40,60...
extjs4图表--折线图
程序媛-jjl的博客
12-28 2418
本篇文章将介绍extjs中自带的图表 在本次案例中，提供一下功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年各个月中人数。 请看下面代码： Ext.define('ChartLineTest', { extend: 'Ext.panel.Panel', autoScroll : true, selectYear:null,//定义年
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值