ExtJs4实战流量统计系统----系统核心是图表，曲线数量不固定怎么办？（二）

能最直观的展示流量数据的，当属各种图表了，神马折线图、柱状图、饼图......

这也是我选择ExtJs来重构这个项目的原因，因为ExtJs有一套图表控件，虽然功能较FusionCharts略弱~，

但ExtJs还有其他诸如Grid、Tree、Form等一系列用于开发一个完整系统的控件，这对于一个界面要靠自己的设计盲来说......不说你们也知道。

------------------------------我是分隔线-----------------------------------

刚开始动手，就发现Ext的折线图中，一条曲线就是一个字段，由该字段的多个值绘成一条曲线。

比如说：今天的流量数据，从0点到23点，那么要实现PV一条曲线，UV一条曲线，那再简单不过了。

创建个Chart，设置好对应的字段名就OK了，这像这样子↓。

------------------------------我是分隔线-----------------------------------

但除此类图表外，我还需要的是：只显示PV数据，但要的是一天一条曲线，比如昨天一条，今天一条，都是PV数据，都是0点到23点的数据，好对比嘛，

这就麻烦了，使劲研究API后，还是得抓后脑勺......

问了下度娘和google，倒是查了好几个，点进去一看，其实也就一两个，其他都是复制粘贴，解决办法也一样：那就是在服务器端处理好数据，格式化为Ext能解析的样式。

比如这样的数据：

目的是：X轴是小时（VTime），Y轴自然是PV了，然后23号一条张，24号一条线，当然，也可能要继续增加：25号一条，26号一条......

这样Ext原生就无法支持了，以Ext对数据格式的要求："2013-02-23"和"2013-02-24"得是字段名，字段值是PV，主键是VTime。

如果在服务端处理的话，"2013-02-23"这样的东西，显然不能做为对象的属性。

那要返回json给Ext就只能拼字符串了，着实麻烦，直接放弃。

------------------------------我是分隔线-----------------------------------

那就只能用脚本来重新转换数据格式了。

原本我是希望能创建一个新的Reader，就像JsonReader一样，接受到数据后，通过此Reader转换数据，多方便；无奈以我目前的功能，实在无法参透Ext的源码。

没办法了，只能先从服务端获取原生数据，然后再逐条格式化，最后重新组合。

new一个新的store，设置好fields，将组合好的新格式数据，填充到store里，创建Chart，将store绑定到Chart。

OK，虽然笨拙了点，但好歹是实现了。

下边就是代码了，因为是就着需求来写这功能，原本看着还可以配置下参数实现通用。

但随着需求的变化，比如，需要从返回的日期字段里，分离出日，后来又要分离出月，这下好了，着急实现效果，顾不上通用不通用了，直接改之。

------------------------------我是分隔线-----------------------------------

首先，这个没疑问，Ajax获取数据。格式如上边的数据库截图。

然后便是转换数据格式了，思路大概是这样：

　　通过三个配置属性：

　　　　属性1：需要做为X轴值的字段名（如小时）；

　　　　属性2：需要做为曲线数据的字段（如PV）；

　　　　属性3：再就是需要做为一条曲线的字段（如日期）。

　　转换过程：循环所有返回的原生数据，逐条分析。

1. 根据配置，找到属性3的值，把它放进一个数组（这个数组用来存属性3的值，也就是所有曲线，数组有多少条数据，就会有多少条曲线，不重复是肯定的），再new object()，属性3的值就是此对象的一个属性，属性的值，是以属性2为名的字段值，当然，X轴怎么能忘了呢，获取属性1为我的字段值，也做为此对象的一个属性值，属性名嘛可以通过配置也可以固定死。
2. 这样，当第一条数据走完上述步骤后，新的数据组合里，已经有一条记录了，假设这第新记录是这样的：“VHour:5,2013-02-23:15555”，接下来再循环其他原生数据时，就得做判断了，比如如果新组合里，已经有小时=5的数据了，而当前循环到的数据，也是小时=5的数据，但日期是另一天，那么就不需要new object()，直接给已经存在的数据新增一个属性就是了，就是这样：“VHour:5,2013-02-23:15555,2013-02-24:3214”。
3. 如此循环处理完所有原生数据，那么上边的截图数据，就会变成这样的格式，当然，新数据是json格式的。

   VHour	2013-02-23	2013-02-24
   0	30311	27480
   1	19363	17506
   2	12401	11292
   3	9064	9449
   4	7680	8631
   5	12818	9248

代码在这（这是我根据自己的需求实现的，看不懂的可以留言）：

/// <reference path="../../Scripts/ext4.2/ext-all.js" />
Ext.define('Yiqi.Show.Chart.MultiDiyLine', {
    extend: 'Ext.panel.Panel',
    //requires: ['Yiqi.Chart.DiyJson'],

    BottomTitle: '小时',
    BaseFieldName: 'VTime', //--基本字段，以此字段为基础，将所有该字段值一样的数据，进行处理。
    TurnFieldName: 'VDate', //--需要将值转为新的字段名的字段
    NewTurnFieldFormat: '',
    IsSplitTurnFieldDate: false, //--将转换字段，拆分为month及day
    LineFormat: 'Y-m',
    ReturnDateFormat: 'MS',//--MVC返回的时间值，需要这样的格式来解析
    xFormat: 'd',
    ValueToField: 'PV', //--作为新字段值的原字段。
    ConstFields: [], //--
    root: 'listdata',

    lineFields: [],

    firstLoad: true,

    url: '/CatagoryStatics/GetHourDataByDateBetween',
    catagoryId: 6,
    dtBegin: '',
    dtEnd: '',

    initComponent: function () {
        var me = this;
        this.loadMask = new Ext.LoadMask(this, { msg: "加载中...", removeMask: true }),
        Ext.apply(this, {
            layout: 'fit'
        });

        this.callParent(arguments);
    },
    afterRender: function () {
        this.loadData();
        this.callParent(arguments);
    },
    buildTbarItems: function () {
        this.beginDateField = Ext.create('Ext.form.field.Date', {
            name: 'dtbegin',
            format: 'Y-m-d',
            fieldLabel: '起止日期',
            labelWidth: 60,
            labelAlign: 'right',
             170,
            value: Ext.Date.add(new Date(), Ext.Date.DAY, -1)
        });
        this.endDateField = Ext.create('Ext.form.field.Date', {
            name: 'datefield',
            format: 'Y-m-d',
            value: new Date()
        });
    },
    loadData: function (dateBegin, dateEnd) {
        var me = this;
        me.loadMask.show();
        if (dateBegin) {
            me.dtBegin = dateBegin;
        }
        if (dateEnd) {
            me.dtEnd = dateEnd;
        }
        //--先获取数据
        Ext.Ajax.request({
            url: me.url,
            params: {
                catagoryId: me.catagoryId,
                dtBegin: me.dtBegin,
                dtEnd: me.dtEnd
            },
            success: function (response) {
                if (response.responseText == "unauth") {
                    Yiqi.Common.Tools.IsLogin(response);
                }
                else {
                    //--解析并创建图表
                    var allData = Ext.decode(response.responseText);
                    me.buildAll(allData);
                    me.loadMask.hide();
                }
            },
            failure: function (response) {
                Yiqi.Common.Tools.DealAjaxError(response);
            }
        });
    },
    getParamsValue: function () {
        this.params.dtBegin = this.beginDateField.getValue();
        this.params.dtEnd = this.endDateField.getValue();
        this.params.catagoryId = this.catagoryId;
    },
    buildAll: function (allData) {
        if (!this.firstLoad) {
            this.removeAll(true);
        }
        this.firstLoad = false;
        this.buildStore(allData);
        var objFields = Ext.Array.remove(this.lineFields, this.BaseFieldName);
        objFields = Ext.Array.sort(objFields);
        this.buildChart(objFields);
        this.add(this.lineChart);
    },
    buildStore: function (orgData) {
        //--重新转换数据格式
        var newData = this.readRecords(orgData);
        this.dataStore = Ext.create('Ext.data.JsonStore', {
            autoDestroy: true,
            fields: this.lineFields,
            data: newData
        });
    },
    buildChart: function (fields) {
        this.buildChartSeries(fields);
        this.lineChart = Ext.create('Ext.chart.Chart', {
            style: 'background:#fff',
            animate: true,
            //shadow: false,
            theme: 'Category2',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: fields,
                title: 'PV',
                grid: true
            }, {
                type: 'Category',
                position: 'bottom',
                fields: [this.BaseFieldName],
                title: this.BottomTitle
            }],
            series: this.series,
            store: this.dataStore
        });

    },
    buildAxes: function (fields) {
        this.axes = [{
            type: 'Numeric',
            position: 'left',
            fields: fields,
            grid: true
        }, {
            type: 'Category',
            position: 'bottom',
            fields: [this.BaseFieldName],
            title: this.BottomTitle
        }]
    },
    buildChartSeries: function (fields) {
        //--循环创建
        var me = this;
        var objSeries = [];
        Ext.Array.each(fields, function (obj, idx, all) {
            objSeries[idx] = {
                type: 'line',
                smooth: true,
                highlight: {
                    size: 2,
                    radius: 2
                },
                style: {
                    'stroke-width': 1
                },
                xField: me.BaseFieldName,
                yField: [String(obj)],
                tips: {
                    trackMouse: true,
                    renderer: function (storeItem, item) {
                        this.update(storeItem.get(me.BaseFieldName) + '： ' + Ext.util.Format.number(storeItem.get(String(obj)), '0,0'));
                    }
                }
            };
        });
        this.series = objSeries;
    },
    readRecords: function (data) {
        var me = this;
        //--是否需要从日期字段中分离数据
        if (me.IsSplitTurnFieldDate) {
            me.BaseFieldName = "VDay";
        }
        this.lineFields = new Array();
        this.lineFields.push(me.BaseFieldName);
        var newData = [];
        var listData = data[me.root];
        var newTurnFieldName = me.TurnFieldName;
        //--重新转换数据
        Ext.each(listData, function (obj, idx, all) {
            var objBaseField = obj[me.BaseFieldName];
            //--针对日期数据的处理，因为MVC返回的时间字段数据格式是new Data(/12345465/)
            if (me.IsSplitTurnFieldDate) {
                objBaseField = Ext.Date.format(Ext.Date.parse(obj[me.TurnFieldName], me.ReturnDateFormat), me.xFormat);
            }
            if (!Ext.isEmpty(me.NewTurnFieldFormat)) {

            }
            //--从已分析好的数据中，查看是否已经存在
            var newObj = me.findItemByBaseField(newData, objBaseField);
            //--如果已经存在，那就删除，因为接下来的操作会修改数据
            newData = Ext.Array.remove(newData, newObj);
            for (var key in obj) {
                if (key == me.BaseFieldName) {
                    newObj[key] = obj[key];
                }
                else if (key == me.TurnFieldName) {
                    var objVal = obj[key];
                    //--针对日期数据的处理
                    if (me.IsSplitTurnFieldDate) {
                        objVal = Ext.Date.parse(objVal, me.ReturnDateFormat);

                        newObj[me.BaseFieldName] = objBaseField;
                        objVal = Ext.Date.format(objVal, me.LineFormat);
                    }
                    //--将解析获取的值（如可能是一个日期2013-02-23）作为对象的一个新属性，属性值也是之前配置的一个字段值
                    newObj[String(objVal)] = obj[me.ValueToField];
                    me.InsertToModelFields(String(objVal));
                }
            }
            //--修改完，重新放入数据中
            newData = Ext.Array.push(newData, newObj);
        });
        newData = Ext.Array.sort(newData, function (a, b) {
            return (a[me.BaseFieldName] - b[me.BaseFieldName]);
        });
        return newData;
    },
    findItemByBaseField: function (array, val) {
        var newObj = {};
        var me = this;
        Ext.Array.each(array, function (obj, idx, all) {
            if (obj[me.BaseFieldName] == val) {
                newObj = obj;
                return false;
            }
        });
        return newObj;
    },
    InsertToModelFields: function (modelName) {
        var me = this;
        var existsFlag = false;
        Ext.Array.each(this.lineFields, function (field, idx, all) {
            var fieldName = undefined;
            var typeName = typeof (field);
            if (typeName == "string") {
                fieldName = field;
            }
            else if (typeName == "object") {
                fieldName = field["name"];
            }
            if (fieldName == modelName) {
                existsFlag = true;
                return false;
            }
        });


        if (!existsFlag) {
            this.lineFields.push(modelName);
        }
    }
});

------------------------------我是分隔线-----------------------------------

这就符合Ext图表空间要求的数据格式了。

接下来就是创建图表了，循环步骤1里的数组，逐一创建曲线，最后绑定数据，就OK了。。。

------------------------------我是分隔线-----------------------------------

PS：能实现的方法确实有很多，我这样做，也是时间所迫，来不及去想更简单方便的方法，现在项目已经上线了，却又没什么精力再返回去继续研究。