Ext 拆线图 LiveAnimated

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--ExtJs框架开始-->
    <link rel="stylesheet" type="text/css" href="./ext-4.2.1/css/ext-theme-classic-all.css" />
	<script type="text/javascript" src="./ext-4.2.1/bootstrap.js"></script>
    <script type="text/javascript" src="./ext-4.2.1/ext-lang-zh_CN.js"></script>
    <!--ExtJs框架结束-->
    <script type="text/javascript">
         Ext.onReady(function () {
			//QuickTips的作用是初始化标签中的Ext:Qtip属性,并为它赋予显示提示的动作。
			Ext.QuickTips.init();
			//TextField的提示方式为:在右边缘,如上图所示,参数枚举值为"qtip","title","under","side",id(元素id),
			//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示。
			Ext.form.Field.prototype.msgTarget = ‘side‘;
			var numAxis, 
				chart;
			var generateData = (function(n, floor){  
				var data = [],
					i = 0; 
				return function(){
					data = data.slice();
					data.push({  
						num: ++i,  
						unit: Math.floor(Math.random()*10),
						decade: Math.floor(Math.random()*10),
						hundreds: Math.floor(Math.random()*10)
					});  
					return data;
				} ; 
			})();

			var store1 = Ext.create(‘Ext.data.JsonStore‘, {  
				fields: [‘num‘, ‘unit‘, ‘decade‘, ‘hundreds‘],  
				data: generateData()
			});
			var initr = setInterval(function(){
				var gs = generateData();
				var min = numAxis.minimum ,
					last = gs[gs.length-1].num,
					max = numAxis.maximum,
					markeIndex = chart.markerIndex || 0;
				if(max < last){
					markerIndex =1 ;
					numAxis.maximum = last;
					numAxis.minimum = min+1;
					chart.markerIndex = markerIndex;
				}
				store1.loadData(gs);
			},1000);
			var axesRecords =[
				{type:"Numeric",fields:[‘unit‘, ‘decade‘, ‘hundreds‘],position:"left",title:"Number of Hits"
					,minimum:0,minorTickSteps:1,maximum:9},
				{type:"Numeric",fields:["num"],position:"bottom",minimum:1,minorTickSteps:1,maximum:10,
					title:"Month of the Year",aggregateOp:"sum",constrain:true,}
			]
			var seriesRecords = [
				{type:"line",xfield:"num",yfield:"unit",axis:"left"},
				{type:"line",xfield:"num",yfield:"decade",axis:"left"},
				{type:"line",xfield:"num",yfield:"hundreds",axis:"left"}
			]	

			Ext.define("Ext.custom.CustChart",{
				//创建坐标轴
				createAxes:function(axesRecords){
					var axesArr = [];
					for(var i = 0; i < axesRecords.length; i++){
						var label = axesRecords[i].label?eval("("+axesRecords[i].label+")"):{};
						var axis = {
							type : axesRecords[i].type,
							fields : axesRecords[i].fields,
							position : axesRecords[i].position,
							title  : axesRecords[i].title,
							label : label,
							grid : axesRecords[i].grid?axesRecords[i].grid:true,
							aggregateOp:axesRecords[i].aggregateOp?axesRecords[i].aggregateOp:‘‘,
							constrain:axesRecords[i].constrain?axesRecords[i].constrain:false,
							maximum : axesRecords[i].maximum?axesRecords[i].maximum:10,
							minimum : axesRecords[i].minimum?axesRecords[i].minimum:0,
							minorTickSteps : axesRecords[i].minorTickSteps?axesRecords[i].minorTickSteps:1
						};
						axesArr.push(axis);
					}
					return axesArr;
				},
				createSeries:function(seriesRecords){
					var seriesArr = [];
					for(var i = 0; i < seriesRecords.length; i++){
						var ser = {
							type : seriesRecords[i].type,
							xField : seriesRecords[i].xfield,
							yField : seriesRecords[i].yfield,
							axis : seriesRecords[i].axis,
							smooth : true,
							markerConfig: { type: ‘circle‘, size: 4, radius: 4,‘stroke-width‘: 0},
							tips : { trackMouse : true,width : 200,height : 30,
								renderer : function(storeItem, item) {
									this.setTitle(storeItem.get(item.series.xField)+":"+item.series.yField+":"+storeItem.get(item.series.yField));
								}
							},
							label: {
								display: ‘under‘,
								field: seriesRecords[i].yfield,
								renderer: Ext.util.Format.numberRenderer(‘0‘),
								color: ‘#333‘

							 }
						};
						seriesArr.push(ser);
					}
					return seriesArr;
				},
				createChart:function(axesRecords,seriesRecords){
					var axes = this.createAxes(axesRecords);
					var series = this.createSeries(seriesRecords);
					var chart =Ext.create("Ext.chart.Chart",{
						animate: true,shadow : false,itemId:"chartCmp",
						store: store1,
						axes: axes,
						series:series,
						renderTo: Ext.getBody(),
						style: ‘background:#fff‘,
						legend: { position: ‘top‘ }
					});
					return chart;
				}
			});
			var win = Ext.create(‘Ext.window.Window‘, {  
				width: 800,  
				height: 600,  
				minHeight: 400,  
				minWidth: 550,  
				hidden: false,  
				maximizable: true,  
				title: ‘Column Chart‘,  
				autoShow: true,  
				layout: ‘fit‘,  
				tbar: [{  
					text: ‘Save Chart‘,  
					handler: function() {  
						Ext.MessageBox.confirm(‘Confirm Download‘, ‘Would you like to download the chart as an image?‘, function(choice){  
							if(choice == ‘yes‘){  
								chart.save({  
									type: ‘image/png‘  
								});  
							}  
						});  
					}  
				}, {  
					text: ‘Reload Data‘,  
					handler: function() { 
						store1.loadData(generateData());  
					}  
				}],  
				items: new Ext.custom.CustChart().createChart(axesRecords,seriesRecords)      
			});
			chart = win.child("#chartCmp");
			numAxis = chart.axes.get(1);
			//store1.loadData(generateData());  
		});
     </script>
 </head>
<body>
<!-- 看啥看 -->
<div id = "mydiv"></div>
</body>
</html>
时间: 2024-08-05 23:27:57

Ext 拆线图 LiveAnimated的相关文章

Ext拆线图及slider关联使用

页面代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta http-equiv=&q

拆线图按年、按月,按天统计,前端传时间只要起始时间与结束时间

工具类 package test.common.utils; import test.EventInfoCountVo; import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; public class StatisticalUtil {

loadrunner--分析图合并

一.分析图合并原理 选择view->merge graphs,弹出如图1所示对话框 图1(设置合并图) 1.选择要合并的图.选择一个要与当前活动图合并的图,注意这里只能选择X轴度量单位相同的图. 2.选择合并类型. 1)叠加:查看共用同一X轴的两个图的内容.合并图左侧的Y轴显示当前图的Y轴值,右边的Y轴显示合并进来的图的Y轴值,如图2所示 图2(叠加合并分析图) 2)平铺:在平铺布局查看,共用同一个X轴,合并进来的图显示在当前图的上方,如图3所示 图3(平铺合并分析图) 3)关联:合并后当前活动

跟风舞烟学大数据可视化-Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja

Jfreechart 乱码

整个图标分成三部分chart   title,chart 的plot还有chart的   legend三个部分需要对他们分别设置字体就对了. 先看解决方法( 把这几个全部设置了,都搞定了就可以了): 标题乱码    chart.getTitle().setFont(new Font("宋体", Font.BOLD,12)); 其他 CategoryAxis domainAxis = plot.getDomainAxis();   // NumberAxis  valueAxis=(Nu

echarts使用中的那些事儿(一)

近来由于有几个小项目要用到echarts里的一些图,不得不使用,可是要完全按照自己的意愿来,要对它有些了解,要翻阅资料,遂有以下小结: 1.最开始第一步是把数据调出来就行,能在图上显示就成,以下是最开始的样子: 老板一看说怎么和内页的详情显示的不一样,内页显示的是上升的,你再好好看看到底怎么回事? 看啊看啊,提示框的数据也对着呢,谁知道是咋回事啊.算了换个图显示吧,遂改拆线图为面积图: (列表图) 然而还是不对吧,这是典型的换汤不换药啊,老板与客户都不答应啊.欲哭无泪,为毛内页好好的, 列表页是

mysql读写分离中间件atlas的性能测试

公司最近要对上读写分离的中间件,打算对现下比较流行的中间件逐一进行性能测试.首先测试的是atlas. 此次测试分为两个部分,(1)atlas与直连db的性能比对,(2)event-threads参数对atlas性能的影响 一,简介 Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量bug,添加了很多功能特性. 主要功能: 1.读写分离 2.从库负载均衡

loadrunner提高篇-结果分析实践

分析图合并 一.分析图合并原理 选择view->merge graphs,弹出如图1所示对话框 图1(设置合并图) 1.选择要合并的图.选择一个要与当前活动图合并的图,注意这里只能选择X轴度量单位相同的图. 2.选择合并类型. 1)叠加:查看共用同一X轴的两个图的内容.合并图左侧的Y轴显示当前图的Y轴值,右边的Y轴显示合并进来的图的Y轴值,如图2所示 图2(叠加合并分析图) 2)平铺:在平铺布局查看,共用同一个X轴,合并进来的图显示在当前图的上方,如图3所示 图3(平铺合并分析图) 3)关联:合

跟我一起数据挖掘(18)——什么是数据挖掘(1)

什么是数据挖掘 前两天看到群里有人问,什么是数据挖掘,现在就数据挖掘的概念做一下分析,并且尽量用大白话说一下数据挖掘到底是个啥东西,为啥大数据来了数据挖掘也火了(其实原来就挺火). 先看一上概念: 数据挖掘(英语:Data mining),又译为资料探勘.数据采矿.它是数据库知识发现(英语:Knowledge-Discovery in Databases,简称:KDD)中的一个步骤.数据挖掘一般是指从大量的数据中通过算法搜索隐藏于其中信息的过程.数据挖掘通常与计算机科学有关,并通过统计.在线分析