EXT4.×曲线图的问题

ms262963081 2011-12-01
http://www.iteye.com/problems/76063

]项目中EXT升到4.0.2a后,生成曲线图时,页面卡死,看电脑进程里内存跑的很高,感觉是数据量太大生成那些图形时卡掉的。

在IE9下,虽然慢但是能生成出来,IE8下就卡死了,并且浏览器提示几次如果继续可能会发生错误。

看到官网说4.1的性能提升很大,更换后确实感觉快了一些,但还是IE9下没事,IE8卡死。

一共有9条曲线,每条曲线由200个点连出来,测试IE8下最多4条,再多就卡死。
能否在加载时,默认只生成显示4条,剩下的不生成,然后点击图例的时候再生成别的曲线。找了好久没找到这个怎么控制,求解

或者各位还有什么别的办法能解决,帮助下,小弟新手,感谢 感谢。[/size]

附上代码,见笑。

var win = Ext.create('Ext.panel.Panel', {
            width: 985,
            height: 700,
            hidden: false,
            maximizable: true,
            title: '曲线图',
            renderTo: 'Line',
            layout: 'fit',
            items: {
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: VMASChartStore,
                shadow: true,
                theme: 'Category1',
                legend: {
                    position: 'bottom'

                },
                axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    fields: ['HC', 'CO', 'CO<sub>2</sub>', 'NO', 'O<sub>2</sub>', 'Power', 'Force', 'Velocity' ],
                     minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['TimeNumber'],
                    title: '时间'
                }],
                series: [{
                    type: 'line',
                    title: 'HC(单位:1.0ppm)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill :false,
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'HC',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的HC为:' + storeItem.get('HC'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: 'CO(单位:50.0%)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'CO',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的CO为:' + storeItem.get('CO'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: '功率(单位:1kW)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'Power',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的功率为:' + storeItem.get('Power'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: 'CO2(单位:5.0%)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'CO<sub>2</sub>',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的CO<sub>2</sub>为:' + storeItem.get('CO<sub>2</sub>'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: 'NO(单位:50.0ppm)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'NO',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的NO为:' + storeItem.get('NO'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: 'O2(单位:30.0%)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'O<sub>2</sub>',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的O<sub>2</sub>为:' + storeItem.get('O<sub>2</sub>'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    title: '力(单位:50N)',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'TimeNumber',
                    yField: 'Force',
                    tips: {
                        trackMouse: true,
                        width: 150,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的力为:' + storeItem.get('Force'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    title: '车速(单位:1.0km/h)',
                    axis: 'left',
                    smooth: true,
                    xField: 'TimeNumber',
                    yField: 'Velocity',
                    tips: {
                        trackMouse: true,
                        width: 180,
                        height: 25,
                        renderer: function (storeItem, item) {
                            this.setTitle('第' + storeItem.get('TimeNumber') + '秒的车速为:' + storeItem.get('Velocity'));
                         }
                    },
                    markerConfig: {
                        type: 'circle',
                        size: 3,
                        radius: 3,
                        'stroke-width': 0
                    }
                }]
            }
ms262963081 2011-12-01
ms262963081 2011-12-02
Global site tag (gtag.js) - Google Analytics