ext 3.0 chart 使用笔记添加图列

最新推荐文章于 2020-01-31 22:57:34 发布

最新推荐文章于 2020-01-31 22:57:34 发布 · 171 阅读

文章标签：

#EXT #YUI #工作

Extjs 专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何使用ExtJS创建工作量统计堆叠条形图，并详细解释了配置JsonStore进行数据加载的方法，以及如何设置图表样式和图例显示等。

function getWorkloadPanel(id) {
	var store = new Ext.data.JsonStore({
		url : 'WorkloadChartServlet',
		root : 'results',
		autoLoad : true,
		fields : ['personname', 'draftsman', 'ticketexaminer', 'ratifier',
				'cancelperson', 'cancelorderperson']
		});
	var panel = new Ext.Panel({
				id : id,
				// width : 600,
				// height : 400,
				closable : true,
				autoScroll : true,
				title : '工作量统计',
				items : {
					xtype : 'stackedbarchart',
					store : store,
					yField : 'personname',
                    //图列  下面2个属性要一起使用 来自列子
                    categoryField : 'personname',
                    extraStyle : {
                        legend : {
                            display : 'bottom',
                            padding : 5,
                            font : {
                                family : 'Tahoma',
                                size : 13
                            }
                        }
                    },
                    //----------------
					xAxis : new Ext.chart.NumericAxis({
								stackingEnabled : true,
								title : "票  数"
							}),
					yAxis : new Ext.chart.CategoryAxis({
								title : '工作人员'
							}),
					series : [{
								xField : 'draftsman',
								displayName : '拟票'
							}, {
								xField : 'ticketexaminer',
								displayName : '审核'
							}, {
								xField : 'ratifier',
								displayName : '批准'
							}, {
								xField : 'cancelperson',
								displayName : '作废下令'
							}, {
								xField : 'cancelorderperson',
								displayName : '作废记录'
							}]
				}

			});

	return panel;
}

关于新的chart,docs上介绍的不是很清楚，extraStyle这个具体怎么设置也没说，搜索src文件夹都没找到，就找到唯一一个example，照着试了下，把图列弄出来了