Ext Chart统计图

代码三部分：

1.   创建容器

me.items = [
           {
               xtype: 'panel',
               name: 'chartPanel',
               region: 'center',
               layout: 'fit',
               autoScroll: true,
               layout: { type: 'vbox', align: 'center', pack: 'center' }
           }
        ]

2.加载数据

 Ext.Ajax.request({
            url: SWG.dataService,
            params: {
                responderId: 'IOTControlBodyTemperatureResponder',
                action: 'getbodytemperaturestatbyday',
                personalType: 1,
                startTime: startDate.rawValue,
                endTime: endDate.rawValue,
                likeName: likeName.rawValue,
                classId: classId == "全部" ? "" : classId,
                page: 1,
                start: 0,
                limit: 99999
            },
            callback: function (options, success, response) {
                me.getEl().unmask();
                if (success) { // 请求成功
                    var result = Ext.decode(response.responseText);
                    if (result.first) { // 处理成功
                        var datas = result.second;
                        if (!datas) { return }
                        //动态创建 grid chart
                        me.createChartPanel(datas);
                    }
                    else { // 处理失败
                        SouthWing.Extend.MessageBox.alert('prompt', _L('Operation failed!') + (result.fourth ? result.fourth : ''));
                    }
                }
                else { // 请求失败
                    SouthWing.Extend.MessageBox.alert(_L('error'), _L('request error'));
                }
            },
            scope: me
        });

 

3.

    createChartPanel: function (finalDatas) {
        var me = this;
        var allFields = ["number", "name", "TAll", "T01", "T02", "T03", "T04", "T05", "Tother"];
        var fields = ['name'];
        var fieldTexts = [_L('学生体温统计图')];
        //me.type = type;
        me.finalDatas = finalDatas;
        console.log(finalDatas)
        var chartWidth = finalDatas.length * 140;
        if (chartWidth < 400) {
            chartWidth = 400;
        }

        var store = Ext.create('Ext.data.Store', {
            fields: allFields
        });
        var chart = Ext.create('Ext.chart.Chart', {
            width:'100%',
            //width: chartWidth,
            layout: 'fit',
            xtype: "chart",
            height: chartWidth,
            animate: true,
            shadow: true,
            store: store,
            legend: {
                position: "top",
                boxStroke: "rgba(0,0,0,0.5)"
            },
            axes: [
                {
                    type: "Numeric",
                    position:'bottom',
                    //dashSize: 10,
                    //length: 20,
                    //position: "left",
                    //fields: ["T01", "T01"],//, "TAll"
                    fields: ["T01", "T01", "T03", "T04", "T05", "Tother", "TAll"],//, "TAll"
                    title: _L('次数'),
                    //grid: true,
                
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ["name"],
                    //majorTickSteps: 100,
                    //minorTickSteps: 0,
                    //calculateCategoryCount: true,
                    label: {
                        rotate: {
                            //degrees: -45
                        }
                    },
                    title: _L('学生姓名')
                }
            ],
            legend:{
                position:'bottom'
            },
            series: [
                {
                    type: "bar",
                    gutter: 50,
                    groupGutter:20,
                    xPadding: 10,
                    yPadding: 10,
                    axis: "bottom",
                    highlight: true,
                    xField: "name",
                    yField: ["T01", "T02", "T03", "T04", "T05", "Tother", "TAll"],//, "TAll"
                    title: [_L('过低'), _L('正常'), _L('低热'), _L('中热'), _L('高热'), _L('其他'), _L('全部')],//, _L('全部')
                    label: {
                        field: ["T01", "T02", "T03", "T04", "T05", "Tother", "TAll"],
                        display: "outside",
                        font: '12px "Lucida Grande"',
                        renderer: function (v) {
                            return v;
                        }
                    },
                    //stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 330,
                        renderer: function (storeItem, item) {
                            var temp = "";
                            console.log(item);
                            console.log(storeItem)
                            switch (item.yField) {
                                case "T01":
                                    temp = _L('过低');
                                    break;
                                case "T02":
                                    temp = _L('正常');
                                    break;
                                case "T03":
                                    temp = _L('低热');
                                    break;
                                case "T04":
                                    temp = _L('中热');
                                    break;
                                case "T05":
                                    temp = _L('高热');
                                    break;
                                case "Tother":
                                    temp = _L('其他');
                                    break;
                                case "TAll":
                                    temp = _L('全部');
                                    break;
                            }
                            this.setTitle("<span style='color:black;'>" + temp + ":" + item.value[1] + "</span>");
                        }
                    }
                }
            ]
        });

        chart.getStore().loadData(finalDatas);
        chart.doComponentLayout();
        me.down('panel[name=chartPanel]').items.add(chart);
        me.doComponentLayout();
    },