extjs生成动态折线图,官网demo只有一个维度的动态,然而实际上的变态需求是,x,y两个维度都要根据配置,动态来生成折线图。
为了实现代码,作者连下班骑着自己价值连成的二手自行车都在想:这代码究竟怎么写…闲话不多说,马上贴代码:
(原文请点击这里)
先来jsp:
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>XXXX_监测台</title>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/common/ExtJs4.2/resources/css/ext-all.css" />
<script language="javascript" src="<%=request.getContextPath()%>/common/ExtJs4.2/ext-all.js"></script>
<script language="javascript" src="<%=request.getContextPath()%>/common/ExtJs4.2/ext-lang-zh_CN.js"></script>
<!-- 取本地数据-->
<script language="javascript" src="<%=request.getContextPath()%>/qm/demo/monitor/example-data.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '<%=request.getContextPath()%>/common/ExtJs4.2/resources/ext-theme-classic/images/s.gif';
Ext.QuickTips.init();
var Global = {};
Global.contextPath='<%=request.getContextPath()%>';
</script>
<script type="text/javascript" src="<%=request.getContextPath()%>/qm/demo/monitor/lineChartDemo.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
getTeamStores();//获取维度
});
</script>
</head>
<body></body>
</html>
js代码(访问后台取数据):
/**
* @author lison 2015.11.25
* 拆线图demo
*/
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.grid.*','Ext.data.*','Ext.selection.CheckboxModel','Ext.window.MessageBox',
'Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', '*'
]);
//定义请求Action URL
var URL = Global.contextPath + '/qmTaskTbAction.do';
var seriseStores = [];//动态数据
var fieldsArray = [];//动态维度
//业务主入口
LineCharts = Ext.extend(Ext.Viewport, {
layout: 'border',
scope: this,
// 定义业务组件,数据集
initComponent: function(){
Ext.QuickTips.init();
this.searchForm = new Ext.FormPanel({
region : 'north',
labelAlign : 'right',
frame : true,
labelWidth : 80,
height : 80,
items : [ {
title : "查询条件",
xtype : "fieldset",
items : [ {
layout : 'column',
border : false,
items : [ {
columnWidth : .3,
layout : 'form',
border : false,
items : [ {
xtype : 'textfield',
fieldLabel : '操作人工号',
id : 'oper_user',
name : 'oper_user',
anchor : '50%'
} ]
}, {
columnWidth : .25,
layout : 'form',
border : false,
items : [ {
xtype : 'button',
text : '查询',
scope : this,
anchor : '40%',
handler : function() {
//alert("没有做……");
}
} ]
},{
columnWidth : .25,
layout : 'form',
border : false,
items : [ {
xtype : 'button',
text : '重置',
scope : this,
anchor : '40%',
handler : function() {
this.searchForm.form.reset();
}
} ]
}]
} ]
} ]
});
// store1.loadData(generateData(8));
//自定义线条颜色
var colors = ['#000000','#000FFF','#FFF000','#6E548D','#94AE0A','#FF7348','#3D96AE'];
Ext.define('Ext.chart.theme.MyFancy',{
extend : 'Ext.chart.theme.Base',
constructor : function (config){
this.callParent([Ext.apply({
colors : colors
}, config)]);
}
});
//数据源
this.storeChart = Ext.create('Ext.data.Store', {
model: 'LineChartStoreModel',
proxy: {
type: 'ajax',
url: URL + '?type=query_linechart_store',
reader: {
type: 'json',
root: 'rows'
}
}
});
this.chart = Ext.create('Ext.chart.Chart', {
region : 'center',
style: 'background:#ffffff',
animate: false,
// store: store1,
store: this.storeChart,
shadow: true,//线条的阴影
theme: 'MyFancy',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
fields: ['时间'],
position: 'bottom'
}],
series: seriseStores
});
//组装组件
this.items = [this.searchForm,this.chart];
//初始组件
LineCharts.superclass.initComponent.call(this);
}
});
/**
* 先从数据中查询维度 然后根据维度给model赋值。
* 再生成图形
*/
function getTeamStores(){
Ext.Ajax.request({
url : URL + '?type=query_series_store',
method:'post',
scope: this,
success: function (response, options) {
var obj = Ext.decode(response.responseText);
if (obj && obj.length>0) {
fieldsArray[0]='时间';
for(var i = 0 ;i<obj.length; i++){
fieldsArray.push(obj[i].NAME);
}
if(fieldsArray.length>1){
//给model赋值
Ext.define('LineChartStoreModel', {
extend: 'Ext.data.Model',
fields: fieldsArray
});
createSeriseStores(seriseStores, fieldsArray);//动态生成serise
lineCharts = new LineCharts();
getLineChartStroe();
}else{
Ext.MessageBox.alert('提示', '查询不到维度,请联系管理员!');
}
}
},
failure: function (response, options) {
Ext.MessageBox.alert('提示', '获取维度数据失败,请联系管理员!');
}
});
}
/** 动态生成serise
* seriesArray : 动态折线数组
* fieldsArray : 后台查询回来的维度
*/
function createSeriseStores(seriesArray,fieldsArray){
if(fieldsArray){
//从1开始是因为第0个不是维度。
for(var j = 1 ;j<fieldsArray.length; j++){
seriesArray.push({
type: 'line',
highlight: { size: 7, radius: 7 },
axis: 'left',
smooth: true,
xField: '时间',
yField: fieldsArray[j],
markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }
});
}
}else{
alert("生成图表失败,请联系管理员。");
}
}
//查询折线图数据
function getLineChartStroe(){
lineCharts.storeChart.load();
}
上面的代码是结合项目中查询后台数据,才显示的。如果想单页面测试看效果,看以下代码:
/**
* @author lison 2015.11.25
* 拆线图demo
*/
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.grid.*','Ext.data.*','Ext.selection.CheckboxModel','Ext.window.MessageBox',
'Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', '*'
]);
var seriseStores = [];//动态数据
var fieldsArray = [];//动态维度
//业务主入口
LineCharts = Ext.extend(Ext.Viewport, {
layout: 'border',
scope: this,
// 定义业务组件,数据集
initComponent: function(){
Ext.QuickTips.init();
this.searchForm = new Ext.FormPanel({
region : 'north',
labelAlign : 'right',
frame : true,
labelWidth : 80,
height : 80,
items : [ {
title : "查询条件",
xtype : "fieldset",
items : [ {
layout : 'column',
border : false,
items : [ {
columnWidth : .3,
layout : 'form',
border : false,
items : [ {
xtype : 'textfield',
fieldLabel : '操作人工号',
id : 'oper_user',
name : 'oper_user',
anchor : '50%'
} ]
}, {
columnWidth : .25,
layout : 'form',
border : false,
items : [ {
xtype : 'button',
text : '查询',
scope : this,
anchor : '40%',
handler : function() {
//alert("没有做……");
}
} ]
},{
columnWidth : .25,
layout : 'form',
border : false,
items : [ {
xtype : 'button',
text : '重置',
scope : this,
anchor : '40%',
handler : function() {
this.searchForm.form.reset();
}
} ]
}]
} ]
} ]
});
//自定义线条颜色
var colors = ['#000000','#000FFF','#FFF000','#6E548D','#94AE0A','#FF7348','#3D96AE'];
Ext.define('Ext.chart.theme.MyFancy',{
extend : 'Ext.chart.theme.Base',
constructor : function (config){
this.callParent([Ext.apply({
colors : colors
}, config)]);
}
});
//数据源
this.storeChart = Ext.create('Ext.data.Store', {
model: 'LineChartStoreModel',
data : [{"时间":"一月","大场":55,"中场":30,"小场1":15,"小场2":45,"小场3":34,"小场4":22,"小场5":23,"小场6":23},
{"时间":"二月","大场":5,"中场":65,"小场1":24,"小场2":45,"小场3":26,"小场4":65,"小场5":32,"小场6":43},
{"时间":"三月","大场":34,"中场":45,"小场1":23,"小场2":34,"小场3":43,"小场4":27,"小场5":65,"小场6":67},
{"时间":"四月","大场":65,"中场":56,"小场1":76,"小场2":33,"小场3":45,"小场4":42,"小场5":32,"小场6":21},
{"时间":"五月","大场":12,"中场":23,"小场1":43,"小场2":67,"小场3":76,"小场4":31,"小场5":54,"小场6":65},
{"时间":"六月","大场":65,"中场":54,"小场1":34,"小场2":23,"小场3":67,"小场4":24,"小场5":24,"小场6":21},
{"时间":"七月","大场":12,"中场":43,"小场1":32,"小场2":43,"小场3":42,"小场4":66,"小场5":23,"小场6":43},
{"时间":"八月","大场":21,"中场":43,"小场1":54,"小场2":32,"小场3":54,"小场4":62,"小场5":12,"小场6":42}]
});
this.chart = Ext.create('Ext.chart.Chart', {
region : 'center',
style: 'background:#ffffff',
animate: false,
// store: store1,
store: this.storeChart,
shadow: true,//线条的阴影
theme: 'MyFancy',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
fields: ['时间'],
position: 'bottom'
}],
series: seriseStores
});
//组装组件
this.items = [this.searchForm,this.chart];
//初始组件
LineCharts.superclass.initComponent.call(this);
}
});
/**
* 先从数据中查询维度 然后根据维度给model赋值。
* 再生成图形
*/
function getTeamStores(){
var obj = [{"NAME":"大场"},{"NAME":"高端"},{"NAME":"小场1"},{"NAME":"小场2"},
{"NAME":"小场3"},{"NAME":"小场4"},{"NAME":"小场5"}];
fieldsArray[0]='时间';
for(var i = 0 ;i<obj.length; i++){
fieldsArray.push(obj[i].NAME);
}
if(fieldsArray.length>1){
//给model赋值
Ext.define('LineChartStoreModel', {
extend: 'Ext.data.Model',
fields: fieldsArray
});
createSeriseStores(seriseStores, fieldsArray);//动态生成serise
lineCharts = new LineCharts();
}else{
Ext.MessageBox.alert('提示', '查询不到维度,请联系管理员!');
}
}
/** 动态生成serise
* seriesArray : 动态折线数组
* fieldsArray : 后台查询回来的维度
*/
function createSeriseStores(seriesArray,fieldsArray){
if(fieldsArray){
//从1开始是因为第0个不是维度。
for(var j = 1 ;j<fieldsArray.length; j++){
seriesArray.push({
type: 'line',
highlight: { size: 7, radius: 7 },
axis: 'left',
smooth: true,
xField: '时间',
yField: fieldsArray[j],
markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }
});
}
}else{
alert("生成图表失败,请联系管理员。");
}
}
如果有什么不明白,欢迎留言。