Extjs4.2柱状图

最新推荐文章于 2016-08-28 14:37:00 发布

java_天照

最新推荐文章于 2016-08-28 14:37:00 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： extjs4 jsp 柱状图界面

本文链接：https://blog.youkuaiyun.com/lr393993507/article/details/17627517

Ext.onReady(function(){
	var store = Ext.create('Ext.data.JsonStore', {
	    fields: ['name', 'data'],
	    data: [
	        { 'name': '张三',   'data':100},
	        { 'name': '李四',   'data': 70 },
	        { 'name': '王二', 'data': 50 },
	        { 'name': '周五',  'data': 20 },
	        { 'name': '马二',  'data':370 }
	    ]
	});

	Ext.create('Ext.chart.Chart', {
	    renderTo:'container',
	    width:'90%',
	    height: 600,
	    animate: false,
	    store: store,
	    axes: [
	        {
	            type: 'Numeric',
	            position: 'left',
	            fields: ['data'],
	            label: {
	                renderer: Ext.util.Format.numberRenderer('0,0')
	            },
	            title: '完成工单量',
	            grid: true,
	            minimum: 0
	        },
	        {
	            type: 'Category',
	            position: 'bottom',
	            fields: ['name'],
	            title: '维修人员'

	        }
	    ],
	    series: [
	        {
	            type: 'column',
	            axis: 'left',
	            highlight: true,
	            tips: {
	              trackMouse: true,
	              width: 140,
	              height: 28,
	              renderer: function(storeItem, item) {
	                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + '份');
	              }
	            },
	            label: {
	              display: 'insideEnd',
	              'text-anchor': 'middle',
	                field: 'data',
	                renderer: Ext.util.Format.numberRenderer('0'),
	                orientation: 'vertical',
	                color: '#333'
	            },
	            xField: 'name',
	            yField: 'data'
	        }
	    ]
	});
});

//---------------------------------------------------------------------
下面是jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-neptune.css">
	<script type="text/javascript" src="ext/ext-all.js"></script>
	<script type="text/javascript" src="js/zhu.js"></script> 
	
</head>
<body>
	<div id="container"></div>
</body>
<script type="text/javascript">

</script>
</html>