extjs生成动态折线图

于 2017-01-17 21:58:15 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： extjs 文章标签： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010290791/article/details/54587981
版权

extjs生成动态折线图，官网demo只有一个维度的动态，然而实际上的变态需求是，x,y两个维度都要根据配置，动态来生成折线图。

为了实现代码，作者连下班骑着自己价值连成的二手自行车都在想：这代码究竟怎么写…闲话不多说，马上贴代码：
（原文请点击这里）
先来jsp:

<%@ page contentType="text/html; charset=utf-8"%>
<html>
    <head>
        <title>XXXX_监测台</title>
        <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/common/ExtJs4.2/resources/css/ext-all.css" />
        <script language="javascript"  src="<%=request.getContextPath()%>/common/ExtJs4.2/ext-all.js"></script>
        <script language="javascript"  src="<%=request.getContextPath()%>/common/ExtJs4.2/ext-lang-zh_CN.js"></script>
        <!-- 取本地数据-->
        <script language="javascript"  src="<%=request.getContextPath()%>/qm/demo/monitor/example-data.js"></script>

        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '<%=request.getContextPath()%>/common/ExtJs4.2/resources/ext-theme-classic/images/s.gif';
            Ext.QuickTips.init();
            var Global = {};
            Global.contextPath='<%=request.getContextPath()%>';
        </script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/qm/demo/monitor/lineChartDemo.js"></script>
        <script type="text/javascript">
            Ext.onReady(function() {
                getTeamStores();//获取维度
            });
        </script>
    </head>
    <body></body>
</html>

js代码(访问后台取数据)：

/**
 * @author lison 2015.11.25
 * 拆线图demo
 */
Ext.Loader.setConfig({
    enabled: true
});

Ext.require([
    'Ext.grid.*','Ext.data.*','Ext.selection.CheckboxModel','Ext.window.MessageBox',
    'Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', '*'
]);

//定义请求Action URL
var URL = Global.contextPath + '/qmTaskTbAction.do';
var seriseStores =  [];//动态数据
var fieldsArray = [];//动态维度

//业务主入口
LineCharts = Ext.extend(Ext.Viewport, {
    layout: 'border',
    scope: this,

    // 定义业务组件，数据集
    initComponent: function(){
        Ext.QuickTips.init();

        this.searchForm = new Ext.FormPanel({
            region : 'north',
            labelAlign : 'right',
            frame : true,
            labelWidth : 80,
            height : 80,
            items : [ {
                title : "查询条件",
                xtype : "fieldset",
                items : [ {
                    layout : 'column',
                    border : false,
                    items : [ {
                        columnWidth : .3,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'textfield',
                            fieldLabel : '操作人工号',
                            id : 'oper_user',
                            name : 'oper_user',
                            anchor : '50%'
                        } ]
                    }, {
                        columnWidth : .25,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'button',
                            text : '查询',
                            scope : this,
                            anchor : '40%',
                            handler : function() {
                                //alert("没有做……");
                            }
                        } ]
                    },{
                        columnWidth : .25,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'button',
                            text : '重置',
                            scope : this,
                            anchor : '40%',
                            handler : function() {
                                this.searchForm.form.reset();
                            }
                        } ]
                    }]
                } ]
            } ]
        });
//      store1.loadData(generateData(8));
      //自定义线条颜色
        var colors = ['#000000','#000FFF','#FFF000','#6E548D','#94AE0A','#FF7348','#3D96AE'];
        Ext.define('Ext.chart.theme.MyFancy',{
            extend : 'Ext.chart.theme.Base',
            constructor : function (config){
                this.callParent([Ext.apply({
                    colors : colors
                }, config)]);
            }
        });

        //数据源
        this.storeChart = Ext.create('Ext.data.Store', {
             model: 'LineChartStoreModel',
             proxy: {
                 type: 'ajax',
                 url: URL + '?type=query_linechart_store',
                 reader: {
                     type: 'json',
                     root: 'rows'
                 }
             }
         });

        this.chart = Ext.create('Ext.chart.Chart', {
            region : 'center',
            style: 'background:#ffffff',
            animate: false,
//            store: store1,
            store: this.storeChart,
            shadow: true,//线条的阴影
            theme: 'MyFancy',
            legend: {
                position: 'bottom'
            },
            axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Category',
                    fields: ['时间'],
                    position: 'bottom'
                }],
            series: seriseStores
        });

        //组装组件
        this.items = [this.searchForm,this.chart];
        //初始组件
        LineCharts.superclass.initComponent.call(this);
    }
});

/**  
 * 先从数据中查询维度 然后根据维度给model赋值。 
 * 再生成图形
 */
function getTeamStores(){
    Ext.Ajax.request({              
        url : URL + '?type=query_series_store',
        method:'post',
        scope: this,
        success: function (response, options) {
            var obj = Ext.decode(response.responseText);
            if (obj && obj.length>0) {
                fieldsArray[0]='时间';
                for(var i = 0 ;i<obj.length; i++){
                    fieldsArray.push(obj[i].NAME);
                }
                if(fieldsArray.length>1){
                    //给model赋值
                    Ext.define('LineChartStoreModel', {
                        extend: 'Ext.data.Model',
                        fields: fieldsArray
                    });
                    createSeriseStores(seriseStores, fieldsArray);//动态生成serise
                    lineCharts = new LineCharts();
                    getLineChartStroe();
                }else{
                    Ext.MessageBox.alert('提示', '查询不到维度，请联系管理员!');
                }
            }
        },
        failure: function (response, options) {
            Ext.MessageBox.alert('提示', '获取维度数据失败，请联系管理员!');
        }
    });
}

/** 动态生成serise
 * seriesArray : 动态折线数组
 * fieldsArray : 后台查询回来的维度
 */
function createSeriseStores(seriesArray,fieldsArray){
    if(fieldsArray){
        //从1开始是因为第0个不是维度。
        for(var j = 1 ;j<fieldsArray.length; j++){
            seriesArray.push({
                type: 'line',
                highlight: { size: 7, radius: 7 },
                axis: 'left',
                smooth: true,
                xField: '时间',
                yField: fieldsArray[j],
                markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }
            });
        }
    }else{
        alert("生成图表失败，请联系管理员。");
    }
}

//查询折线图数据
function getLineChartStroe(){
    lineCharts.storeChart.load();
}

上面的代码是结合项目中查询后台数据，才显示的。如果想单页面测试看效果，看以下代码：

/**
 * @author lison 2015.11.25
 * 拆线图demo
 */
Ext.Loader.setConfig({
    enabled: true
});

Ext.require([
    'Ext.grid.*','Ext.data.*','Ext.selection.CheckboxModel','Ext.window.MessageBox',
    'Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', '*'
]);
var seriseStores =  [];//动态数据
var fieldsArray = [];//动态维度

//业务主入口
LineCharts = Ext.extend(Ext.Viewport, {
    layout: 'border',
    scope: this,

    // 定义业务组件，数据集
    initComponent: function(){
        Ext.QuickTips.init();

        this.searchForm = new Ext.FormPanel({
            region : 'north',
            labelAlign : 'right',
            frame : true,
            labelWidth : 80,
            height : 80,
            items : [ {
                title : "查询条件",
                xtype : "fieldset",
                items : [ {
                    layout : 'column',
                    border : false,
                    items : [ {
                        columnWidth : .3,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'textfield',
                            fieldLabel : '操作人工号',
                            id : 'oper_user',
                            name : 'oper_user',
                            anchor : '50%'
                        } ]
                    }, {
                        columnWidth : .25,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'button',
                            text : '查询',
                            scope : this,
                            anchor : '40%',
                            handler : function() {
                                //alert("没有做……");
                            }
                        } ]
                    },{
                        columnWidth : .25,
                        layout : 'form',
                        border : false,
                        items : [ {
                            xtype : 'button',
                            text : '重置',
                            scope : this,
                            anchor : '40%',
                            handler : function() {
                                this.searchForm.form.reset();
                            }
                        } ]
                    }]
                } ]
            } ]
        });
        //自定义线条颜色
        var colors = ['#000000','#000FFF','#FFF000','#6E548D','#94AE0A','#FF7348','#3D96AE'];
        Ext.define('Ext.chart.theme.MyFancy',{
            extend : 'Ext.chart.theme.Base',
            constructor : function (config){
                this.callParent([Ext.apply({
                    colors : colors
                }, config)]);
            }
        });

        //数据源
        this.storeChart = Ext.create('Ext.data.Store', {
             model: 'LineChartStoreModel',
             data : [{"时间":"一月","大场":55,"中场":30,"小场1":15,"小场2":45,"小场3":34,"小场4":22,"小场5":23,"小场6":23},
                     {"时间":"二月","大场":5,"中场":65,"小场1":24,"小场2":45,"小场3":26,"小场4":65,"小场5":32,"小场6":43},
                     {"时间":"三月","大场":34,"中场":45,"小场1":23,"小场2":34,"小场3":43,"小场4":27,"小场5":65,"小场6":67},
                     {"时间":"四月","大场":65,"中场":56,"小场1":76,"小场2":33,"小场3":45,"小场4":42,"小场5":32,"小场6":21},
                     {"时间":"五月","大场":12,"中场":23,"小场1":43,"小场2":67,"小场3":76,"小场4":31,"小场5":54,"小场6":65},
                     {"时间":"六月","大场":65,"中场":54,"小场1":34,"小场2":23,"小场3":67,"小场4":24,"小场5":24,"小场6":21},
                     {"时间":"七月","大场":12,"中场":43,"小场1":32,"小场2":43,"小场3":42,"小场4":66,"小场5":23,"小场6":43},
                     {"时间":"八月","大场":21,"中场":43,"小场1":54,"小场2":32,"小场3":54,"小场4":62,"小场5":12,"小场6":42}]
         });

        this.chart = Ext.create('Ext.chart.Chart', {
            region : 'center',
            style: 'background:#ffffff',
            animate: false,
//            store: store1,
            store: this.storeChart,
            shadow: true,//线条的阴影
            theme: 'MyFancy',
            legend: {
                position: 'bottom'
            },
            axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    position: 'left',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                            stroke: '#bbb',
                            'stroke-width': 0.5
                        }
                    }
                }, {
                    type: 'Category',
                    fields: ['时间'],
                    position: 'bottom'
                }],
            series: seriseStores
        });

        //组装组件
        this.items = [this.searchForm,this.chart];
        //初始组件
        LineCharts.superclass.initComponent.call(this);
    }
});

/**  
 * 先从数据中查询维度 然后根据维度给model赋值。 
 * 再生成图形
 */
function getTeamStores(){
    var obj = [{"NAME":"大场"},{"NAME":"高端"},{"NAME":"小场1"},{"NAME":"小场2"},
               {"NAME":"小场3"},{"NAME":"小场4"},{"NAME":"小场5"}];
    fieldsArray[0]='时间';
    for(var i = 0 ;i<obj.length; i++){
        fieldsArray.push(obj[i].NAME);
    }
    if(fieldsArray.length>1){
        //给model赋值
        Ext.define('LineChartStoreModel', {
            extend: 'Ext.data.Model',
            fields: fieldsArray
        });
        createSeriseStores(seriseStores, fieldsArray);//动态生成serise
        lineCharts = new LineCharts();
    }else{
        Ext.MessageBox.alert('提示', '查询不到维度，请联系管理员!');
    }
}

/** 动态生成serise
 * seriesArray : 动态折线数组
 * fieldsArray : 后台查询回来的维度
 */
function createSeriseStores(seriesArray,fieldsArray){
    if(fieldsArray){
        //从1开始是因为第0个不是维度。
        for(var j = 1 ;j<fieldsArray.length; j++){
            seriesArray.push({
                type: 'line',
                highlight: { size: 7, radius: 7 },
                axis: 'left',
                smooth: true,
                xField: '时间',
                yField: fieldsArray[j],
                markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }
            });
        }
    }else{
        alert("生成图表失败，请联系管理员。");
    }
}

如果有什么不明白，欢迎留言。

lison_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
extjs动态折线图Demo
01-17
该demo适用于生成动态的折线图，而且是x,y两个维度的动态，如果想修改成一个维度更简单。本例子经过本人亲测通过，保证能使用！ 或者查看帖子：http://www.itxiu.net/javascript/20161231/219.html
extjs4 折线图（实时动态展现数据）实例
weixin_30785593的博客
08-07 318
建议用chrome或firefox打开 ie有可能有兼容性问题 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>独乐不如众乐</title> ...
EXTJS lineChart折线图
SS
08-07 6324
JSON文件
EXTJS Line chart 原理研究
zha_zi的专栏
06-12 148
【ExtJs】折线图
编程记录，亲测有效
05-03 3667
ExtJs在ExtJs4之后，包含4则推出了图表功能，虽然图表功能可以通过其余JQuery插件实现，例如《【jQuery】兼容IE6的图表插件Highcharts》（点击打开链接），但是这个ExtJs的图表插件也很优秀，至少一些常见的图表也是不虚的。 一、基本目标 画出如下的折现图： 二、制作过程 首先，ExtJs绘制图表的项目，与《【ExtJs】与后台数据库交互的
extjs4图表绘制之折线图实现方法分析
11-20
本文实例讲述了extjs4图表绘制之折线图实现方法。分享给大家供大家参考，具体如下： 本篇文章将介绍extjs中自带的图表 在本次案例中，提供一下功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年...
ExtJS制作折线图
06-15
ExtJS 折线图 lineChart，前台的内容由后台传入，可支持任意多条折线图。
EXT创建动态的折线图
04-14
NULL 博文链接：https://luoyu-ds.iteye.com/blog/1741271
Ext JS 3.4 创建多条折线图
deng11342的专栏
07-12 8346
var zxstore = new Ext.data.JsonStore({ fields:['name', 'visits', 'views'], data: [ {name:'Jul 07', visits: 245000, views: 300000}, {name:'Aug 07', visits: 24000
ExtJs双折线图
03-23
NULL 博文链接：https://mzl-2011.iteye.com/blog/1035567
ExtJS6图表简单demo(折线图，散点图，柱状图)
taizhimin
06-27 7045
ExtJS6图表简单demo(折线图，散点图，柱状图)首先需要引入这三个文件，都懂 <link rel="stylesheet" type="text/css" href="build/classic/theme-triton/resources/theme-triton-all.css" /> <script type="text/javascript" src="bui
ExtJs4.0之曲线图
叮咚侠的博客
11-27 948
//定义曲线图数据源store var riskLineChartStore = Ext.create('Ext.data.Store', { id : 'riskLineChartStore', //store包含的数据字段 fields : ['riskLineLevel', 'riskLineTime', 'leftCo
extjs 曲线图表
weixin_30550081的博客
05-25 161
1.构建数据源 //数据源（此处是静态数据） var data = [ [' '..........], [' '..........] ]; var TBstore = new Ext.data.ArrayStore({ data:data, ...
ExtJS Chart动态line
iteye_3304的博客
06-21 190
    //更改store的fields 、 axes的fields 和 chart的series var storeFields = ['time']; var axesFields = []; var series = []; for (var i = 0; i &lt; rtus.hiddenValue.split(',').length; i++) { storeField...
extjs4.2中的图表 line sery折线图跨过某些点的方法
ychyssss的专栏
08-19 1093
在extjs中的折线图中，在项目中遇到一个问题，因为要
extjs6折线图完整例子
最新发布
03-29
下面是一个基于 ExtJS 6 的折线图完整例子： ``` Ext.onReady(function () { Ext.define('SalesData', { extend: 'Ext.data.Model', fields: [ {name: 'month', type: 'string'}, {name: 'sales', type: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值