Extjs chart 总结 reload-chart.js 修改

最近用到 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
                }
            }
        }
    });
});