Ext chart 折线图表

今天做任务中修改图表任务，第一次做图表，有几个点研究了半天，在此记录一下

 

大体结构：

{
                xtype: 'chart',  //类型chart
                id:'id',
                store: this.store,
                legend: { }, //设置折线说明
                axes: [{ //坐标轴
                    type: 'Numeric',
                    position: 'left',
                }, {
                    type: 'Category',
                    position: 'bottom',
                }],
                series: [{ //设置图表
                    type: this.type, //折线类型
                    title:'1',
                    markerConfig: { },
                    listeners: {  },//监听事件
                    tips: {  }, //提示信息
                },{
                    type: this.type,
                    title:'2',
                    markerConfig: {  },
                    listeners: {  },
                    tips: {  }
                    },
                }]
            }
 

右侧的折线说明：使用  legend  关键字

多条折线：在series中设置多个{}

 

代码结构：

{
    	        xtype: 'chart',  //类型chart
    	        animate: true,
    	        region: 'north',
    	        shadow: true,
    	        id:'id',
    	        height:200,
    	        store: this.store,
    	        legend: {
//                    docked: 'bottom'
    			position: 'right',
    	                boxStroke: '#E0E0E0',
    	                update:false
                },
    	        axes: [{
    	            type: 'Numeric',
    	            position: 'left',
    	            fields: this.leftname,
    	            minimum: 0,
    	            title: false,
    	            grid: true
    	        }, {
    	            type: 'Category',
    	            position: 'bottom',
    	            fields: this.bottomtname,
    	            title: false
    	        }],
    	        series: [{
    	            type: this.type,
    	            title:'入库单价',
    	            axis: 'left',
    	            gutter: 80,
    	            xField: 'a', //x轴对应store字段
    	            yField: ['u'], //y轴对应store字段
    	            highlight: true,
    	            markerConfig: {
    	                radius: 6,
    	                size: 12,
    	                fill: '#a2b5ca',
    	                type: 'cross',
    	            },
    	            listeners: {
	                    'itemmouseup': function(item) {
	                         var series = Ext.getCmp('gooddetailed').series.get(0), //获取当前图表Id对应的第一条折线
	                         index = Ext.Array.indexOf(series.items, item),
	                         selectionModel = Ext.getCmp('gooddetailedgrid').getSelectionModel();
	                         selectedStoreItem = item.storeItem;
	                         selectionModel.select(index);
	                    }
	                },
    	            tips: {
	                    trackMouse: true,
	                    width: 200,
	                    height: 100,
	                    renderer: function(storeItem, item) { //设置悬浮提示内容
	                        this.setTitle('生产时间：'+storeItem.get('a') + '<br />' + '入库单价：' +storeItem.get('u'));
	                    }
	                },
    	        },{
    	            type: this.type,
    	            title:'采购单价',
    	            axis: 'left',
    	            gutter: 80,
    	            showInLegend : false, //是否显示
    	            xField: 'a',
    	            yField: ['p'],
    	            highlight: true,
    	            markerConfig: {
    	                radius: 6,
    	                size: 12,
    	                fill: '#B3EE3A',
    	                type: 'cross',
    	            },
    	            listeners: {
	                    'itemmouseup': function(item) {
	                         var series = Ext.getCmp('gooddetailed').series.get(1),
	                         index = Ext.Array.indexOf(series.items, item),
	                         selectionModel = Ext.getCmp('gooddetailedgrid').getSelectionModel();
	                         selectedStoreItem = item.storeItem;
	                         selectionModel.select(index);
	                    }
	                },
    	            tips: {
	                    trackMouse: true,
	                    width: 200,
	                    height: 100,
	                    renderer: function(storeItem, item) {
	                        this.setTitle('生产时间：'+storeItem.get('a') + '<br />' + '采购单价：' +storeItem.get('p'));
	                    }
	                },
    	        }]
    	    }