最近用到 Extjs自带的 reload-chart.js
我将其例子中的代码更改成从后台读取json字符串格式的动态获取数据效果:
界面效果:
我的js代码如下:
//===部件盘点异常统计===//
function ComponentCheckExceptionStatisticsInfo(){
cmptExcepStatisticsRequestWindow.show();//显示部件盘点异常统计窗口
}
//========================部件异常统计store==============================//
//==数据解析器 cmptExcepStatisticsRequestReader==//
var cmptExcepStatisticsRequestReader = new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: 'data',
idProperty: 'CHECK_ID'
}, [{
name: 'CHECK_ID',
mapping: 'CHECK_ID'
}, {
name: 'COUNT_EXCEPTION',
mapping: 'COUNT_EXCEPTION'
}, {
name: 'BEGIN_TIME',
mapping: 'BEGIN_TIME'
}, {
name: 'END_TIME',
mapping: 'END_TIME'
}, {
name: 'CHECKPLAN_TIME',
mapping: 'CHECKPLAN_TIME'
}]);
//==代理cmptExcepStatisticsRequestProxy==//
var cmptExcepStatisticsUrlPath = '../../../Url/Warehouse/CheckWarehouse/ComponentsCheck/GetComponentsCheckExceptionStatistics.aspx';// 请求的页面
var cmptExcepStatisticsRequestProxy = new Ext.data.HttpProxy({
url: cmptExcepStatisticsUrlPath
});
//==存储器cmptExcepStatisticsStore==//
var cmptExcepStatisticsStore = new Ext.data.Store({
reader: cmptExcepStatisticsRequestReader,
proxy: cmptExcepStatisticsRequestProxy
});
//查询范围 开始时间
var startTimeCmptExcepStatistics = new Ext.form.DateField({
name: 'startTimeCmptExcepStatistics',
fieldLabel: '开始时间',
width: 150,
maxLength: 20,
minLength: 1,
readOnly: true,
emptyText: nowDate,
allowBlank: false,
blankText: '请输入开始时间'
});
//查询范围 结束时间
var endTimeCmptExcepStatistics = new Ext.form.DateField({
name: 'endTimeCmptExcepStatistics',
fieldLabel: '结束时间',
width: 150,
maxLength: 20,
minLength: 1,
readOnly: true,
emptyText: nowDate,
allowBlank: false,
blankText: '请输入结束时间'
});
//盘点异常统计 查询按钮定义
var btnSearchOfcmptExcepStatistics = new Ext.Button({
id: 'btnSearchOfcmptExcepStatistics',
text: '盘点异常统计'
});
//读取所有异常
cmptExcepStatisticsStore.load({
params: {
startTime: "1900-01-01",
endTime: "2999-01-01"
}
});
//btnSearchOfcmptExcepStatistics查询统计按钮 单击事件
btnSearchOfcmptExcepStatistics.on("click", function(){
var startTimeValue = startTimeCmptExcepStatistics.getValue();
var endTimeValue = endTimeCmptExcepStatistics.getValue();
//如果时间范围都选择的话
if (IsDateFieldNull(startTimeValue) && IsDateFieldNull(endTimeValue)) {
var startTime = startTimeCmptExcepStatistics.formatDate(startTimeValue, 'yyyy-mm-dd');
var endTime = endTimeCmptExcepStatistics.formatDate(endTimeValue, 'yyyy-mm-dd');
cmptExcepStatisticsStore.load({
params: {
startTime: startTime,
endTime: endTime
}
});
}
else {
Ext.Msg.show({
title: '提示',
msg: '请选择盘点统计时间范围!',
buttons: Ext.Msg.OK,
animEl: 'elId',
width: 200,
icon: Ext.MessageBox.QUESTION
});
}
});
//==盘点异常统计FormPanel==//
var cmptExcepStatisticsStorePanel = new Ext.FormPanel({
width: 700,
height: 400,
title: '盘点异常统计',
tbar: ["开始时间:", startTimeCmptExcepStatistics, " ", "结束时间:", endTimeCmptExcepStatistics, " ", btnSearchOfcmptExcepStatistics],
items: {
xtype: 'columnchart',
store: cmptExcepStatisticsStore,
yField: 'COUNT_EXCEPTION',
xField: 'CHECK_ID',
//提示字符串
tipRenderer: function(chart, record, index, series){
return '盘点单ID:' + record.data.CHECK_ID + ' \n异常数目: ' + record.data.COUNT_EXCEPTION + '\n盘点结束时间:' + record.data.END_TIME;
},
xAxis: new Ext.chart.CategoryAxis({
title: '盘点单'
}),
yAxis: new Ext.chart.NumericAxis({
title: '异常数目'
}),
extraStyle: {
xAxis: {
labelRotation: 0//x轴标题旋转度数
},
yAxis: {
labelRotation: 0//y轴标题旋转度数
}
}
}
});
// ===部件盘点异常统计Window===//
var cmptExcepStatisticsRequestWindow = new Ext.Window({
name: 'cmptExcepStatisticsRequestWindow',
title: '部件盘点异常统计',
layout: 'fit',
width: 600,
height: 400,
modal: true,
closeAction: 'hide',
resizable: false,
items: [cmptExcepStatisticsStorePanel],
listeners: {
'beforehide': function(){
cmptExcepStatisticsStorePanel.getForm().reset();
}
}
});
//==判断选择的时间范围是否为空==//
function IsDateFieldNull(value){
if (value != null && value != "") {
return true;
}
else {
return false;
}
}
Extjs 自带的 reload-chart.js
function generateData(){
var data = [];
for(var i = 0; i < 12; ++i){
data.push([Date.monthNames[i], (Math.floor(Math.random() * 11) + 1) * 100]);
}
return data;
}
Ext.onReady(function(){
var store = new Ext.data.ArrayStore({
fields: ['month', 'hits'],
data: generateData()
});
new Ext.Panel({
width: 700,
height: 400,
renderTo: document.body,
title: 'Column Chart with Reload - Hits per Month',
tbar: [{
text: 'Load new data set',
handler: function(){
store.loadData(generateData());
}
}],
items: {
xtype: 'columnchart',
store: store,
yField: 'hits',
xField: 'month',
xAxis: new Ext.chart.CategoryAxis({
title: 'Month'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Hits'
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
});
分享到:
相关推荐
extjs-theme-bootstrap-master.zip
extjs-basex.js extjs-basex.js extjs-basex.js
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...
软件介绍: Spket的ExtJS提示工具,内附需要加入ExtJS的提示内容文件ext-core-dev.js ,所需要的都整合为一个压缩包,一步到位直接使用。featurespluginsext-core-dev.js
语言程序设计资料:ExtJs学习笔记-2积分.doc
extJs2.0+spket-1.6.11.zip extJs2.0+spket-1.6.11.zip
EXTJS-4.2.1.883
ExtJS权威指南-迷你书.pdf
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
js框架 extjs-4.2.1.883.7z
extjs-basex.js extjs-basex.js extjs-basex.js
ExtJs学习资料28-Ext.data.JsonStore数据存储器
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽...
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...
extjs3.0 的 Typescript声明文件
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
Extjs3.4 Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记 里面有3.4的开发包,附属:Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记