首頁(yè) 猿問請(qǐng)問如何使用EXT...

請(qǐng)問如何使用EXT JS查詢數(shù)據(jù)庫(kù)動(dòng)態(tài)生成如下圖的二維折線圖?

JavaScript

狐的傳說 2019-04-26 18:15:19

數(shù)據(jù)庫(kù)查詢只給我返回三個(gè)字段,如下圖所示:網(wǎng)上的自定義插件如下圖: /** * * @author LuoYu * @date 2012-12-04 * 基于EXT-3.3.0開發(fā)的可以添加動(dòng)態(tài)折線數(shù)的EXT.chart.DynamicLineChart插件 * 初使化方法可以通過 new Ext.chart.DynamicLineChart(), * 也可以通過xtype的形式,xtype:dynamiclinechart * */ Ext.chart.DynamicLineChart = Ext.extend(Ext.chart.LineChart,{ initComponent : function() { var store = new Ext.data.Store({ url : this.loadUrl, reader : new Ext.data.JsonReader() }); var config = { store : store, xField: this.xField, series : new Array(), extraStyle:{ legend:{ display: 'bottom', padding: 5, font:{ family: 'Tahoma', size: 13 } } } }; Ext.apply(this, config); Ext.apply(this.initialConfig, config); Ext.chart.DynamicLineChart.superclass.initComponent.apply(this, arguments); }, onRender : function() { Ext.chart.DynamicLineChart.superclass.onRender.apply(this,arguments); this.store.on('load', function() { if (typeof (this.store.reader.jsonData.series) === 'object') { var series = []; Ext.each(this.store.reader.jsonData.series, function(serie) { series.push(serie); }); this.setSeries(series); } }, this); this.store.load(); } }); Ext.reg("dynamiclinechart", Ext.chart.DynamicLineChart);網(wǎng)上的JSON返回格式如下圖:

查看完整描述

10 回答

HUH函數(shù)

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊

你的值相差太大了，我這里大概做了個(gè)demo，都連一起了。。數(shù)據(jù)要處理成{x:'x列值',z中存在的名稱:'對(duì)應(yīng)的y值'.....}此類數(shù)據(jù)加載就行了

反對(duì) 回復(fù) 2019-05-13

慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

 <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Line Chart</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script>
        Ext.onReady(function () {
            ////////////////////////////////////////////數(shù)據(jù)，服務(wù)器生成此類數(shù)據(jù)就行，和你數(shù)據(jù)庫(kù)結(jié)構(gòu)一樣，
            直接序列化為json格式字符串復(fù)制給給對(duì)應(yīng)的變量
            data = [{ x: '06:00', y: 123, z: '1#干式變壓器' },
       { x: '13:00', y: 4, z: '1#干式變壓器' },
       { x: '18:00', y: 0.99, z: '1#干式變壓器' },
       { x: '20:00', y: 0.99, z: '1#干式變壓器' },
       { x: '22:30', y: 0.99, z: '1#干式變壓器' },
       { x: '06:00', y: 543, z: '2#干式變壓器' },
       { x: '13:00', y: 5, z: '2#干式變壓器' },
       { x: '18:00', y: 0.97, z: '2#干式變壓器' },
       { x: '20:00', y: 0.96, z: '2#干式變壓器' },
       { x: '22:30', y: 0.97, z: '2#干式變壓器' },
       { x: '06:00', y: 0.97, z: '3#干式變壓器' },
       { x: '13:00', y: 7, z: '3#干式變壓器' },
       { x: '18:00', y: 0.97, z: '3#干式變壓器' },
       { x: '20:00', y: 0.96, z: '3#干式變壓器' },
       { x: '22:30', y: 0.97, z: '3#干式變壓器' }]
            ////////////////////////////////////////////
            //數(shù)據(jù)轉(zhuǎn)換 z/y數(shù)據(jù)整合
            fields = ['x']//store的列
            series = []//chart的series配置
            mydata = []//處理后store加載的值，和fields對(duì)應(yīng)，變?yōu)閇{x:'時(shí)間',z的值:'對(duì)應(yīng)的y'...更多z的值對(duì)應(yīng)y}]這種格式
            maxLineName = ''; maxY = 0;//記錄y最大值，以便獲取最大值的z值作為chart的y軸
            kvZ = {}//記錄fields是否已經(jīng)壓入過唯一的z值
            var arrColor = ['red', 'blue', 'green', 'yellow', 'gray']//每條軸的顏色，如果很多繼續(xù)擴(kuò)展這個(gè)數(shù)組，要不超過5條顏色會(huì)重復(fù)
            for (var i = 0; i < data.length; i++) {
                lineName = data[i].z;
                if (maxLineName == '') { maxLineName = lineName; maxY = data[i].y }
                else if (data[i].y > maxY) { maxLineName = lineName; maxY = data[i].y }
                if (!kvZ[lineName]) {
                    kvZ[lineName] = true;
                    color = arrColor[fields.length%arrColor.length]
                    fields.push(lineName)
                    series.push((function (lineName) {
                        return {
                            type: 'line',
                            axis: 'left',
                            xField: 'x',
                            yField: lineName,
                            style: { fill: color, stroke: color, 'stroke-width': 3 },
                            markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: color, stroke: color },
                            tips: {
                                trackMouse: true,
                                width: 80,
                                height: 40,
                                renderer: function (storeItem, item) {
                                    console.log(lineName)
                                    this.setTitle(storeItem.get('x'));
                                    this.update(storeItem.get(lineName));
                                }
                            }
                        }
                    })(lineName));
                }
            }
            kvT = {}
            function fillExist(arr, x, v, attr) {
                for (var i = 0; i < arr.length; i++) if (arr[i].x == x) { arr[i][attr] = v; break; }
            }
            for (var i = 0; i < data.length; i++) {
                x = data[i].x
                if (kvT[x]) fillExist(mydata, x, data[i].y, data[i].z);
                else {
                    item = { x: data[i].x };
                    for (attr in kvZ) item[attr] = attr == data[i].z ? data[i].y : 0
                    mydata.push(item)
                    kvT[x] = true;
                }
            }


            mystore = Ext.create('Ext.data.JsonStore', {
                fields: fields,
                data: mydata
            });
            Ext.create('Ext.chart.Chart', {
                renderTo: document.body,
                xtype: 'chart',
                legend: { position: 'right' },
                animate: false,
                store: mystore, height: 300, width: 600,
                insetPadding: 30,
                axes: [
                    { type: 'Numeric', minimum: 0, position: 'left', fields: [maxLineName], title: true, grid: true },
                    { type: 'Category', position: 'bottom', fields: ['x'], title: true }],
                series: series
            });

        })
    </script>
</head>
    <body id="docbody">
    </body>
</html>

反對(duì) 回復(fù) 2019-05-13

慕仙森

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

最新截圖:
問題就出在這里,通過調(diào)試發(fā)現(xiàn)records 是最新的,但是mydata還是之前的.......

反對(duì) 回復(fù) 2019-05-13

慕村9548890

TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊

反對(duì) 回復(fù) 2019-05-13

阿波羅的戰(zhàn)車

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是返回的JSON格式樣例

反對(duì) 回復(fù) 2019-05-13

守候你守候我

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊

你好,這是所有的JS代碼,ajax請(qǐng)求數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)跟你的格式是一樣的,但是頁(yè)面出現(xiàn)這個(gè)錯(cuò)誤,如下圖,:

錯(cuò)誤對(duì)應(yīng)到的是我的這一行,請(qǐng)問您知道是哪里出問題了嗎....:

        var powerStore = Ext.create('Ext.data.JsonStore', {
        fields: ['x','y','z'],
        autoLoad: false,
        proxy: {
            type: 'ajax',
            url: Eap.contextPath + '/eap/scripts/run-script/smartassets-index-Power.gson',
            reader: {
                type: 'json',
                root: 'models'
                    }
                }
            });

            var fields = ['x']; 
            var series = [];                                            //軸線配置
            var mydata = [];                                            //存放整理后的Store
            var maxLineName = '';                                       //記錄Z最大值
            var maxY = 0;                                               //記錄y最大值，以便獲取最大值的z值作為chart的y軸
            var kvZ = {};                                               //記錄fields是否已經(jīng)壓入過唯一的z值
            var arrColor = ['red', 'blue', 'green', 'yellow', 'gray'];  //每條軸線的顏色，如果很多就繼續(xù)擴(kuò)展這個(gè)數(shù)組，不然超過5條,顏色會(huì)重復(fù)

        powerStore.load({
            scope: this,
            callback: function(records, operation, success) {
                for (var i = 0; i < records.length; i++) {
                    lineName = records[i].get('z');
                    if (maxLineName == '') {
                        maxLineName = lineName; 
                        maxY = records[i].get('y');
                    }
                    if (!kvZ[lineName]) {
                        kvZ[lineName] = true;
                        color = arrColor[fields.length%arrColor.length]
                        fields.push(lineName)
                        series.push((function (lineName) {
                        return {
                            type: 'line',
                            axis: 'left',
                            xField: 'x',
                            yField: lineName,
                            style: { fill: color, stroke: color, 'stroke-width': 3 },
                            markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: color, stroke: color },
                            tips: {
                                trackMouse: true,
                                width: 80,
                                height: 40,
                                renderer: function (storeItem, item) {
                                    this.setTitle(storeItem.get('x'));
                                    this.update(storeItem.get(lineName));
                                }
                            }
                        }
                    })(lineName));
                }
              }

            kvT = {}
            function fillExist(arr, x, v, attr) {
                for (var i = 0; i < arr.length; i++) if (arr[i].x == x) { 
                    arr[i][attr] = v; 
                    break; 
                    }
            }

            for (var i = 0; i < records.length; i++) {
                x = records[i].get('x')
                if(kvT[x]){
                    fillExist(mydata, x, records[i].get('y'), records[i].get('z'));
                    }
                else {
                    item = { x: records[i].get('x') };
                    for (attr in kvZ) item[attr] = attr == records[i].get('z') ? records[i].get('y') : 0
                    mydata.push(item)
                    kvT[x] = true;
                    }
                 }        
           }
        });

    console.log(fields)
    console.log(mydata)

    var newStore = Ext.create('Ext.data.JsonStore', {
             fields: fields,
             data: mydata
            });

    var powerPortlet = Ext.create({
             legend: { position: 'right' },
             xtype: 'cartesian',
             width: 300,
             height: 250,
             store: newStore,
             axes: [
                    { type: 'Numeric', minimum: 0, position: 'left', fields: [maxLineName], title: true, grid: true },
                    { type: 'Category', position: 'bottom', fields: ['x'], title: true }],
             series: series
            });

    var powerPanel = Ext.create('Ext.panel.Panel', {
        id: 'powerPortlet',
        multiSelect: true,
        layout: 'fit',
        border: 0,
        items:[powerPortlet],
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        },
        refreshPortlet: function() {
            newStore.load();
        }

反對(duì) 回復(fù) 2019-05-13