extjs 3.4.0与4.0.7的多字段柱形图对比

最新推荐文章于 2020-08-26 17:27:26 发布

Roden

最新推荐文章于 2020-08-26 17:27:26 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： extjs jsp 柱形图

本文链接：https://blog.csdn.net/luo_deng/article/details/10375721

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
  <head>
    <title>衡量指标回顾条形图</title>   
    <link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../js/extjs/ext-all.js"></script>
	<script type="text/javascript" src="../js/extjs/src/locale/ext-lang-zh_CN.js"></script>	
  </head>
<%
//String jfk = request.getParameter("bscsbh");
//String zb = request.getParameter("measuresbh");
String jfk = "1003";//1116-1003
String zb = "10610";
 %>
<script type="text/javascript">
Ext.chart.Chart.CHART_URL = '../js/extjs/resources/charts.swf';
Ext.onReady(function(){ 
var store = new Ext.data.JsonStore({   
   autoDestroy : true,                          
   url : 'chartJsonDate.jsp',
   baseParams : {'jfk': '<%=jfk%>','zb':'<%=zb%>'},        
   root : 'root',                         
   fields : ['A', 'B', 'SJ','QJ']                   
      });                  
store.load();
new Ext.Panel({   
    applyTo: 'container',
    width: 350,
    height: 179,
    layout: 'fit',   
    items: {
        xtype: 'columnchart',
        store: store,        
        xField: 'QJ',       
        series: [{ //列
                type: 'column', //类型可以改变（线）                
                displayName: 'A值',
                yField: 'A',
                style: {
                    color: 0x0000FF                   
                }
            }, {
                type: 'column',
                displayName: 'B值',
                yField: 'B',
                style: {
                    color: 0x008000
                }
            },{
                type: 'column',
                displayName: '实际值',
                yField: 'SJ',                
                style: {
                    color: 0xFFFF00                  
                }
            }]
    }
});
});
</script>
<div id="container"> 

<div style="position:absolute;padding-left:355;padding-top:50;">
<div style="background-color:#0000FF;height:14px;width:20px;"></div>
<div style="height:20px;"></div>
<div style="background-color:#008000;height:14px;width:20px;"></div>
<div style="height:20px;"></div>
<div style="background-color:#FFFF00;height:14px;width:20px;"></div>
</div> 

<div style="position:absolute;padding-left:375;padding-top:50;font-size:10px;width:40px;">
<div style="height:20px;"> A值</div>
<div style="height:14px;"></div>
<div style="height:20px;"> B值</div>
<div style="height:14px;"></div>
<div style="height:20px;">实际值</div>
</div>  
 
</div>
</html>

{'root':[{'A':'1848.35','B':'1848.35','SJ':'1687.1','QJ':'第一季度'},{'A':'1860.74','B':'1860.74','SJ':' 0','QJ':'第二季度'},{'A':'2189.85','B':'2189.85','SJ':' 0','QJ':'第三季度'},{'A':'2429.59','B':'2429.59','SJ':' 0','QJ':'第四季度'},{'A':'8328.53','B':'8328.53','SJ':' 0','QJ':'全年'}]}

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<%
//String jfk = request.getParameter("bscsbh");
//String zb = request.getParameter("measuresbh");
String jfk = "1003";//1116-1003
String zb = "10610";
 %>
<head>  
    <link rel="stylesheet" type="text/css" href="../js/extjs4.1/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../js/extjs4.1/examples/shared/example.css" />
	<script type="text/javascript" src="../js/extjs4.1/bootstrap.js"></script>  
	
<script type="text/javascript">
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function() {  

	Ext.define("model",{
						extend:"Ext.data.Model",
						fields:[
									{name:'A值',type:'float'},
									{name:'B值',type:'float'},
									{name:'实际值',type:'float'},
									{name:'季度',type:'string'}
										
									
									
						]
					});


		 var store = new Ext.data.JsonStore({
				    storeId: 'myStore',
				    proxy: {
				        type: 'ajax',
				        url: 'columnJsonDate.jsp?jfk=<%=jfk%>&zb=<%=zb%>',					       
				        reader: {
				            type: 'json',
				            root: 'root'
				          
				        }
				    },
				    model: 'model',
				    autoLoad:true
				});
          
    var panel = Ext.create('widget.panel', {
        width: 400,
        height: 179,        
        renderTo: Ext.getBody(),
        layout: 'fit',		
		 items: {
            id: 'chartCmp',
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            shadow: true,
            store: store,
            legend: {
              position: 'right'  
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['A值', 'B值', '实际值'],
                minimum: 0,                
                grid: true                
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['季度']
               
            }],
            series: [{
                type: 'column',
                axis: 'bottom',
                xField: '季度',
                yField: ['A值', 'B值', '实际值'],
				 tips: {
                    trackMouse: true,
                    width: 60,
                    height: 26,
                    renderer: function(storeItem, item) {
                        this.setTitle(item.value[1]);
                    }
                }
            }]
        }
    });
});
	
	</script>
</head>
<body id="docbody">  
</body>
</html>

{'root':[{'A值':'1848.35','B值':'1848.35','实际值':'1687.1','季度':'第一季度'},{'A值':'1860.74','B值':'1860.74','实际值':' 0','季度':'第二季度'},{'A值':'2189.85','B值':'2189.85','实际值':' 0','季度':'第三季度'},{'A值':'2429.59','B值':'2429.59','实际值':' 0','季度':'第四季度'},{'A值':'8328.53','B值':'8328.53','实际值':' 0','季度':'全年'}]}

Roden

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs 3.4.0与4.0.7的多字段柱形图对比

衡量指标回顾条形图 <%//String jfk = request.getParameter("bscsbh");//String zb = request.getParameter("measuresbh");String jfk = "1003";//1116-1003String zb = "10610"; %>Ext.chart.Char
复制链接

扫一扫