效果图：
目录信息
graphic.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META HTTP-EQUIV="Pragma"CONTENT="no-cache"/> <META HTTP-EQUIV="Cache-Control"CONTENT="no-cache"/> <META HTTP-EQUIV="Expires"CONTENT="0"> <meta name='viewport' content='initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0' /> <title>extjs图形学习</title> <link rel="stylesheet" type="text/css" href="/static/ext-4.1.1a/resources/css/ext-all.css"/> <script type="text/javascript" src="/static/ext-4.1.1a/ext-all.js"></script> <!-- 自定义文件，主要是ext代码的编写 --> <script type="text/javascript" src="line.js"></script> <script type="text/javascript" src="column.js"></script> <script type="text/javascript" src="columnLine.js"></script> <style type="text/css"> div{width:400px;height:300px;float:left;} </style> </head> <body> <div id="line_panel"></div> <div id="column2_panel"></div> <div id="column_and_line_panel"></div> <div id="column_panel"></div> </body> </html>
line.js(生成折线图使用)
Ext.onReady(function(){ // 定义一个数据对象 Ext.define("WeatherPoint",{ extend:'Ext.data.Model', fields:['temperature','pm10','date'] }); // 创建一个数据源 var vstore = Ext.create('Ext.data.Store',{ model:'WeatherPoint', data:[ {temperature:58, pm10:100,date:new Date(2011,1,1,8)}, {temperature:63, pm10:165,date:new Date(2011,1,1,9)}, {temperature:73, pm10:285,date:new Date(2011,1,1,10)}, {temperature:78, pm10:235,date:new Date(2011,1,1,11)}, {temperature:81, pm10:335,date:new Date(2011,1,1,12)}, {temperature:120,pm10:425,date:new Date(2011,1,1,13)}, {temperature:90, pm10:450,date:new Date(2011,1,1,14)} ] }); // 创建图表 Ext.create('Ext.chart.Chart',{ renderTo:'line_panel', 400, height:300, store:vstore, axes:[{ title:'temperature', type:'Numeric', position:'left', fields:['temperature','pm10'], minimum:50, maximun:500 },{ title: 'Time', type: 'Time', position: 'bottom', fields: ['date'], groupBy: 'hour', dateFormat: 'ga' }], series:[{ type:'line', xField:'date', yField:'temperature' },{ type:'line', xField:'date', yField:'pm10' }] }); });
column.js
Ext.onReady(function(){ // 创建一个数据源 var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data','money'], data: [ { name: 'one', data:120 ,money:85}, { name: 'two', data: 125 ,money:85}, { name: 'three', data:180 ,money:85}, { name: 'four', data: 220 ,money:85}, { name: 'five', data:162 ,money:85}, { name: 'six', data:310 ,money:85}, { name: 'serven', data:300 ,money:85} ] }); // 需要渲染的颜色 var colors=['#6E548D','#94AE0A','#FF7348','#3D96AE','#94AE0A','#FF7348','#3D96AE']; // 创建图表 Ext.create('Ext.chart.Chart', { renderTo: "column_panel", 400, height: 300, animate: true, background:'#aaa', store: store, axes: [ { type: 'Numeric', position: 'left', fields: ['data'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' } ], series: [ { type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'outside', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, renderer:function(sprite, record, attributes, index, store){ attributes.fill=colors[index]; // 定义柱子的颜色 return attributes; }, // 如果需要根据该柱子对应的数据值，来显示该柱子的颜色，代码如下 /*renderer:function(sprite, record, attributes, index, store){ // (数据源store)的data数据中第index个对象的属性xxx(axisY) var pm10Temp = store.data.get(index).get(axisY); if(pm10Temp<50){ attributes.fill=colorArr[0]; }else if(pm10Temp<150){ attributes.fill=colorArr[1]; }else if(pm10Temp<250){ attributes.fill=colorArr[2]; }else if(pm10Temp<350){ attributes.fill=colorArr[3]; }else if(pm10Temp<420){ attributes.fill=colorArr[4]; }else{ attributes.fill=colorArr[5]; } return attributes; },*/ // groupGutter:95, gutter:95, xField: 'name', yField: 'data' } ] }); Ext.create('Ext.chart.Chart', { renderTo: "column2_panel", 400, height: 300, animate: true, store: store, axes: [ { type: 'Numeric', position: 'left', fields: ['data','money'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' } ], series: [ { type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'outside', 'text-anchor': 'middle', field: ['data','money'], renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', // 控制显示的label内容是水平显示还是垂直显示 color: '#333' }, title:['title1','title2'], // groupGutter:95, gutter:95, xField: 'name', yField: ['data','money'] } ] }); });
columnLine.js
Ext.onReady(function(){ // 创建一个数据源 var store = Ext.create('Ext.data.JsonStore', { fields: ['name', 'data'], data: [ { name: 'metric one', data:120 }, { name: 'metric two', data: 125 }, { name: 'metric three', data:180 }, { name: 'metric four', data: 220 }, { name: 'metric five', data:162 }, { name: 'metric six', data:310 }, { name: 'metric serven', data:300 } ] }); // 创建图表 Ext.create('Ext.chart.Chart', { renderTo: "column_and_line_panel", 400, height: 300, animate: true, store: store, axes: [ { type: 'Numeric', position: 'left', fields: ['data'], label: { renderer: Ext.util.Format.numberRenderer('0,0') }, title: 'Sample Values', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['name'], title: 'Sample Metrics' } ], series: [ { type: 'column', axis: 'left', highlight: true, tips: { trackMouse: true, 140, height: 28, renderer: function(storeItem, item) { this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); } }, label: { display: 'outside', 'text-anchor': 'middle', field: 'data', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'vertical', color: '#333' }, // groupGutter:95, gutter:95, xField: 'name', yField: 'data' },{ type:'line', xField:'name', yField:'data' } ] }); });