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>
Extjs4.2柱状图
最新推荐文章于 2016-08-28 14:37:00 发布