Extjs根据store 动态创建图表

来源：互联网发布：海报字体设计软件编辑：程序博客网时间：2024/04/28 01:42

/**
* Extjs4 动态创建图表
* author:shangql
* date:2012.12.12
*/
/**
* 判断空如果为空返回true
*
* @param obj
* @returns {Boolean}
*/
function isEmpty(obj){
if(typeof(obj) == 'undefined' || obj == ''){
return true;
}
}
/**
* 创建刻度引用字段
* @param num
* @returns {Array}
*/
function newNumericFields(num){
var fieldsArr = new Array();
for ( var i = 1; i <= num; i++) {
fieldsArr.push('data'+i);
}
return fieldsArr;
}
/**
* 创建数据集引用字段
* @param num
* @returns {Array}
*/
function newStoreFields(num){
var fieldsArr = new Array();
fieldsArr.push("name");
for ( var i = 1; i <= num; i++) {
fieldsArr.push('name'+i);
fieldsArr.push('data'+i);
}
return fieldsArr;
}
/**
* 创建Y坐标轴
*
* @param position
* 坐标轴显示位置(left;right)
* @returns 坐标轴对象
*/
function newNumeric(position){
var Numeric = {
type: 'Numeric',
minimum: 0,
position: position,
fields: ['data1','data2','data3','data4','data5','data6','data7','data8','data9'],
minorTickSteps: 9,
majorTickSteps:9,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
},
grid:true,
label:{
renderer:function(v){
return Ext.util.Format.round(v,2);
},
font: '10px Arial'
}
};
return Numeric;
}
/**
* 创建X坐标轴
*
* @param position
* 坐标轴显示位置(top;bottom)
* @param title
* 坐标轴显示标题(可以是'')
* @returns 坐标轴对象
*/
function newCategory(position,title){
var Category = {
type: 'Category',
position: position,
title: title,
fields: ['name'],
label: {
font: '9px Chancery'
}
};
return Category;
}
/**
* 创建柱
* @param position 线的轴刻度显示位置(left;right)
* @param tips 鼠标滑过图表显示的lable引用的字段
* @param title 图表图例汉字标题
* @param renderer 鼠标滑过图表显示的lable的单位
* @returns 柱形对象
*/
function newColumn (position,tips,title,renderer){
var column = {
type: 'column',
axis: position,
highlight: {
stroke:'green'
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
if(isEmpty(renderer)){
this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips));
}else{
this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips) + renderer );
}
}
},
style:{
width:40
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: '',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
title:title,
xField: 'name',
yField: tips
};
return column;
}
/**
* 创建线
* @param position 线的轴刻度显示位置(left;right)
* @param tips 鼠标滑过图表显示的lable引用的字段
* @param title 图表图例汉字标题
* @param renderer 鼠标滑过图表显示的lable的单位
* @returns 线形对象
*/
function newLine (position,tips,title,renderer){
var line = {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: position,
smooth: true,
fill: false,
title:title,
xField: 'name',
yField: tips,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
style: {
'stroke-width': 3,
fill: false,
opacity: 0.2
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
if(isEmpty(renderer)){
this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips));
}else{
this.setTitle(storeItem.get('name') + ': ' + storeItem.get(tips) + renderer );
}
}
}
};
return line;
}
/**
* 画图表
* @param store 数据集
* @param category 样式种类
* @param title 标题
* @param seriesType 图表类型 column;line(暂时只支持柱形，线形)
* @param renderer 渲染单位可以为''
* @returns
*/
function drawChart(store,category,title,seriesType,renderer){
// 轴线数组
var axes = new Array();
// 图表类型数组
var series = new Array();
//============实例化轴============
// y左坐标轴
var leftNumeric = newNumeric('left');
var bottomTitle = title + "分析指标";
// x底部坐标轴
var bottomCategory = newCategory('bottom',bottomTitle);
// 添加到轴线数组,y左右坐标轴
axes.push(leftNumeric);
axes.push(bottomCategory);
//判断图表类型
if(seriesType == 'column'){
// 实例化柱形图
var column = newColumn('left','data1',title,renderer);
series.push(column);
}else if(seriesType == 'line'){
// 实例化线形图
var line = newLine('left','data1',title,renderer);
series.push(line);
}
// 创建图表对象
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
width: $(window).width(),
height: $(window).height() * 0.9,
style: 'background:#fff',
animate: true,
shadow: false,
store: store,
theme: category,
insetPadding: 50,
legend: {
position: 'right'
},
axes: axes,
series: series
});
// 返回图表对象
return chart;
}