EXTJS饼图

EXTJS3.4实现的饼图,带点击联动事件,就是点击第一个图出现第二个图,点击第二个图出现第三个图:

JSP页面

<link rel="stylesheet" type="text/css"

href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js">

</script>

<script type="text/javascript" src="ext/ext-all.js">

</script>

<link rel="stylesheet" type="text/css" href="ext/shared/examples.css" />

<script type="text/javascript">

Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';

var store;

var panel;

var store2;

var panel2;

var store3;

var panel3;

//显示第三幅图

function showThree(year, proName) {

store3 = new Ext.data.JsonStore( {

autoDestroy : true,

url : 'statistics_queryByProjectNameAndYear.action',

storeId : 'myStore3',

root : 'frontStatisticsList',

idProperty : 'name',

fields : [ 'name', 'value', 'rate' ]

});

var div3 = document.getElementById("panel3");

if (div3 != null && div3 != undefined) {

div3.removeNode(true);

}

;

panel3 = new Ext.Panel( {

width : 350,

height : 350,

title : '月度报表',

id : 'panel3',

renderTo : 'container3',

items : {

store : store3,

xtype : 'piechart',

dataField : 'value',

categoryField : 'name',

extraStyle : {

legend : {

display : 'bottom',

padding : 5,

font : {

family : 'Tahoma',

size : 13

}

}

}

}

});

store3.load( {

params : {

projectName : proName,

year : year

}

});

};

//显示第二幅图

function showTwo(proName) {

store2 = new Ext.data.JsonStore( {

autoDestroy : true,

url : 'statistics_queryByProjectName.action',

storeId : 'myStore2',

root : 'frontStatisticsList',

idProperty : 'name',

fields : [ 'name', 'value', 'rate' ]

});

var div = document.getElementById("panel2");

if (div != null && div != undefined) {

div.removeNode(true);

}

;

var div3 = document.getElementById("panel3");

if (div3 != null && div3 != undefined) {

div3.removeNode(true);

}

;

panel2 = new Ext.Panel( {

width : 350,

height : 350,

title : '年度报表',

id : 'panel2',

renderTo : 'container2',

items : {

store : store2,

xtype : 'piechart',

dataField : 'value',

categoryField : 'name',

listeners : {

itemclick : function(o) {

var rec = store2.getAt(o.index);

showThree(rec.get('name'), rec.get('rate'));

}

},

extraStyle : {

legend : {

display : 'bottom',

padding : 5,

font : {

family : 'Tahoma',

size : 13

}

}

}

}

});

store2.load( {

params : {

projectName : proName

}

});

};

//显示第一幅图

Ext.onReady(function() {

store = new Ext.data.JsonStore( {

autoDestroy : true,

url : 'statistics_queryByCbdw.action',

storeId : 'myStore',

root : 'frontStatisticsList',

idProperty : 'name',

fields : [ 'name', 'value', 'rate' ]

});

panel = new Ext.Panel( {

width : 350,

height : 350,

title : '按承办单位统计',

renderTo : 'container',

items : {

store : store,

xtype : 'piechart',

dataField : 'value',

categoryField : 'name',

listeners : {

itemclick : function(o) {

var rec = store.getAt(o.index);

showTwo(rec.get('name'));

}

},

extraStyle : {

legend : {

display : 'bottom',

padding : 5,

font : {

family : 'Tahoma',

size : 13

}

}

}

}

});

});

function show() {

store.load( {

params : {

cbdw : document.getElementById('name').value

}

});

var div = document.getElementById("panel2");

if (div != null && div != undefined) {

div.removeNode(true);

}

;

var div3 = document.getElementById("panel3");

if (div3 != null && div3 != undefined) {

div3.removeNode(true);

}

;

}

</script>

Struts.xml

<action name="statistics_*" class="StatisticsAction" method="{1}">

<result type="json" name="success" />

</action>

效果图:

EXTJS饼图

////////////////////////////////////

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>gridPanel</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
  17. <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
  18. <script type="text/javascript" src="ext3.2/ext-all.js"></script>
  19. <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
  20. <script type="text/javascript">
  21. Ext.onReady(function() { //定义ColumnModel
  22. var store = new Ext.data.JsonStore({
  23. fields: ['name', 'visits', 'views'],
  24. data: [
  25. {name: '日本', visits: 245000, views: 3000000},
  26. {name: '韩国', visits: 240000, views: 3500000},
  27. {name: '泰国', visits: 355000, views: 2000000},
  28. {name: '伊朗', visits: 375000, views: 3200000},
  29. {name: '法国', visits: 590000, views: 3500000},
  30. {name: '德国', visits: 395000, views: 6800000},
  31. {name: '中国', visits: 580600, views: 8500000}
  32. ]
  33. });
  34. new Ext.Panel({
  35. title: '国际某某统计图',
  36. renderTo: 'container',
  37. width: 500,
  38. height: 300,
  39. layout: 'fit',
  40. items: {
  41. xtype: 'piechart',
  42. store: store,
  43. categoryField: 'name',
  44. dataField: 'visits',
  45. extraStyle: {
  46. legend: {
  47. display: 'bottom',
  48. padding: 5,
  49. font: {
  50. family : 'Tahoma',
  51. size: 13
  52. }
  53. }
  54. },
  55. listeners: {
  56. itemclick: function(o) {
  57. var rec = store.getAt(o.index);
  58. Ext.example.msg('选择提示', '你选择了-{0}.', rec.get('name'));
  59. }
  60. }
  61. }
  62. });
  63. });
  64. </script>
  65. </head>
  66. <body>
  67. <div id="container"> </div>
  68. </body>
  69. </html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>gridPanel</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext3.2/ext-all.js"></script>
	<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	  Ext.onReady(function() {   //定义ColumnModel
		  var store = new Ext.data.JsonStore({
			fields: ['name', 'visits', 'views'],
			data: [
				{name: '日本', visits: 245000, views: 3000000},
				{name: '韩国', visits: 240000, views: 3500000},
				{name: '泰国', visits: 355000, views: 2000000},
				{name: '伊朗', visits: 375000, views: 3200000},
				{name: '法国', visits: 590000, views: 3500000},
			    {name: '德国', visits: 395000, views: 6800000},
				{name: '中国', visits: 580600, views: 8500000}
				]
       	});
	  
	   new Ext.Panel({
	   title: '国际某某统计图',
	   renderTo: 'container',
	   width: 500,
	   height: 300,
	   layout: 'fit',
	   items: {
	        xtype: 'piechart',
	        store: store,
	        categoryField: 'name',
	        dataField: 'visits',
	        extraStyle: {
		         legend: {
		               display: 'bottom',
		               padding: 5,
		               font: {
		                  family : 'Tahoma',
		                  size: 13
		               }
		         }
	        }, 
	        listeners: {
	             itemclick: function(o) {
	                    var rec = store.getAt(o.index);
	                    Ext.example.msg('选择提示', '你选择了-{0}.', rec.get('name'));
	             }
	        }
	   }
   });
});
	</script>
  </head>
  
  <body>
    <div id="container"> </div>
  </body>
</html>


2:效果图

EXTJS饼图

xtype指定为piechart, 然后将图像呈现在Panel中,categoryField指定类别数据显示了name属性的数据,

dataField指定扇区数据显示visits属性数据

 ///////////////////////////

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>独乐不如众乐</title>
        <link href='http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css' rel='stylesheet' type='text/css' />   
        <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
   
       
        <script type="text/javascript">
        Ext.onReady(function() {

      // 随机测试数据的生成
      function generateData() {
        var data = [{
              'name' : 'metric one'
            }, {
              'name' : 'metric two'
            }, {
              'name' : 'metric three'
            }, {
              'name' : 'metric four'
            }, {
              'name' : 'metric five'
            }];

        data.forEach(function(e, i, self) {
              e['data'] = Math.round(Math.random() * 100);
            });

        return data;
      }
      var store = Ext.create('Ext.data.JsonStore', {
            fields : ['name', 'data']
          });

      store.loadData(generateData());

      var donut = false;
      // chart饼图的容器
      var chart = Ext.create('Ext.chart.Chart', {
            xtype : 'chart',
            animate : true,
            store : store,
            shadow : true,
            legend : {
              position : 'right'
            },

            // 跟padding有点类似 饼图距离面板边的长度
            insetPadding : 60,
            theme : 'Base:gradients',

            // 饼图的设置
            series : [{
                  type : 'pie',
                  field : 'data',
                  showInLegend : true,
                  donut : donut,
                  // 鼠标经过时的显示的tips
                  tips : {
                    trackMouse : true,
                    width : 140,
                    height : 28,
                    renderer : function(storeItem, item) {
                      // calculate percentage.
                      var total = 0;
                      store.each(function(rec) {
                            total += rec.get('data');
                          });
                      this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100)
                          + '%');
                    }
                  },

                  // 高亮时 扇形偏移距离
                  highlight : {
                    segment : {
                      margin : 20
                    }
                  },

                  // 文字配置
                  label : {
                    field : 'name',
                    display : 'rotate',
                    contrast : true,
                    font : '18px Arial'
                  }
                }]
          });

      var panel = Ext.create('widget.panel', {
            width : 800,
            height : 600,
            title : 'Semester Trends',
            renderTo : Ext.getBody(),
            layout : 'fit',
            tbar : [{
              text : 'Save Chart',
              handler : function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?',
                    function(choice) {
                      if (choice == 'yes') {
                        chart.save({
                              type : 'image/png'
                            });
                      }
                    });
              }
            }, {
              text : 'Reload Data',
              handler : function() {
                store.loadData(generateData());
              }
            }, {
              enableToggle : true,
              pressed : false,
              text : 'Donut',
              toggleHandler : function(btn, pressed) {
                //chart.series是一个Ext.util.MixedCollection
                chart.series.first().donut = pressed ? 35 : false;
                chart.refresh();
              }
            }],
            items : chart
          });
    });
        </script>
       
    </head>
    <body>
    </body>
</html>

 

你可能感兴趣的:(EXTJS饼图)