最近用到 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: '异常数目'