ExtJs4.0之曲线图

最新推荐文章于 2019-07-23 15:31:00 发布

Eric0525

最新推荐文章于 2019-07-23 15:31:00 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ExtJs

本文链接：https://blog.youkuaiyun.com/Kevinzhangfei/article/details/8665423

ExtJs 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在ExtJS4.0中创建一个曲线图，包括定义数据源store、工具栏以及曲线图组件。通过示例代码展示了如何设置数据加载、轴标签、坐标轴属性以及曲线系列样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//定义曲线图数据源store
var riskLineChartStore = Ext.create('Ext.data.Store', {
	id : 'riskLineChartStore',
	//store包含的数据字段
	fields : ['riskLineLevel', 'riskLineTime', 'leftCoordinate'],
	autoDestroy : true,
	//自动加载数据
	autoLoad : true,
	proxy : {
		// 异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
		type : 'ajax',
		url : './homePage!loadAction.do?loadFlag=' + 'riskLine',
		// 数据读取器
		reader : {
			//数据格式为json
			type : 'json',
			//数据存在返回的list中
			root : 'list'
		}
	}
});

//定义工具栏
var riskLineTopBar = Ext.create('Ext.toolbar.Toolbar', {
	//设置工具栏位置
	region : 'north',
	//工具栏上包含的元素
	items : [{
		width : distingruishiability<2300?(300*0.6):300,
		labelWidth:distingruishiability<2300?(270*0.6):270,
		//label标签上显示的内容
		fieldLabel : '历史风险曲线（24小时内风险走势）',
		//label标题与内容的分隔符，此处为空，可以利用此属性设置必须输入的字段，即设置分割字符为红色星号即可
		labelSeparator : '',
		//设置类型为displayfield
		xtype : 'displayfield'
	}, '->', {
		//‘->’表示该标签之后的元素会靠右显示
		xtype : 'button', // default for Toolbars
		text : '刷新',
		icon : 'image/refresh.png',
		handler : function() {
			riskLineChartStore.load();							
		}
	}]
});

//定义曲线图
var riskLineChart = Ext.create('Ext.chart.Chart', {
	//设置类型
	xtype:'chart',
	//将曲线图渲染到页面内，Ext.getBody()获取到的是页面的body区域，renderTo后还可跟某div的Id
	renderTo : Ext.getBody(),
	//设置高度
	height : 236*homepageChartRate,
	// 设置宽度
	width : 380*homepageChartRate,
	animate : true,
	//设置数据源
	store : riskLineChartStore,
	//设置坐标轴属性
	axes : [{
		//设置横坐标为类别
		type : 'Category',
		//横坐标的位置
		position : 'bottom',
		//横坐标对应的store中的字段
		fields : ['riskLineTime'],
		//横坐标名称
		title : '风险时间',
		//
		dashSize:1,		
		label: {
			//设置横坐标旋转60度显示
		    rotate: {
			degrees: -60
		    }
		}
		}, {
		//设置宗纵坐标为数字类型
		type : 'Numeric',
		//设置纵坐标显示的位置
		position : 'left',
		//设置纵坐标对应的数据字段
		fields : ['leftCoordinate'],
		//设置纵坐标标题
		title : '风险等级',
		//设置是否显示坐标线
		grid : true,
		//坐标最小值
		minimum : 0,
		//最大值
		maximum : 5,
		dashSize:1,
		label: {
			//格式化（设置格式）纵坐标数据
		    renderer: Ext.util.Format.numberRenderer('0')
		},
		majorTickSteps : 5
			/*grid : {
				odd : {
					opacity : 1,
					fill : '#ddd',
					stroke : '#bbb',
					'stroke-width' : 1
				}
			}*/
		}],
	//设置曲线属性
	series : [{
			//类型设置为曲线
			type : 'line',
			highlight : {
				size : 7,
				radius : 7
			},
			axis : 'left',
			xField : 'riskLineTime',
			yField : 'riskLineLevel',
			font:'5px Helvetica, sans-serif',
			markerCfg : {
				type : 'cross',
				size : 4,
				radius : 4,
				'stroke-width' : 0
			}
		}]
});