extjs 4 chart 使用后台发送的json数据画图_extjs根据数据生成图片-优快云博客

本文介绍了一个使用Ext.js创建的企业性质统计饼状图的应用实例。该应用通过Ajax从服务器获取统计数据，并将其显示在一个动态加载的饼状图中。图表能够根据企业的不同性质展示各自所占的比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">	
Ext.onReady(function() {
		Ext.QuickTips.init();
		var store=Ext.create('Ext.data.Store',{ 
			fields:['nature_name','count'], 
			autoLoad : true, 
			proxy : {  
		        type : 'ajax',  
		        url : "<c:url value="/getEnpsByNature.do"/>",
		        reader : {  
		            type : 'json',  
		            root : 'data'  
		        }  
		    }  
		});

		function loaddata() {
			store.load();
		}

		var chart3 = Ext.create('Ext.chart.Chart', {
			animate : true,
			store : store,
			width : 600,
			height : 430,
			legend : {
				position : 'bottom'
			},
			series : [ {
				legend : {
					position : 'right'
				},
				type : 'pie',
				highlight : {
					segment : {
						margin : 5
					}
				},
				field : 'count',
				showInLegend : true,
				label : {
					field : 'nature_name',
					display : 'rotate',
					contrast : true,
					font : '18px Arial'
				}
			} ]
		});

		Ext.create('Ext.panel.Panel', {
			renderTo : "resultDiv",
			title : '按照企业的性质统计',
			layout : 'column',
			width : 810,
			height : 500,
			tbar : [ {
				text : '刷新',
				handler : function() {
					loaddata();
				}
			} ],
			items : [ chart3 ]
		});

	});
</script>
 <div class="global_default_font">
	<div id="resultDiv"></div>
</div>

后台发送到前提的数据是json格式的数据，如下：

{"data":[{"count":23,"nature_name":""},{"count":1,"nature_name":"内资（国有）"},{"count":1,"nature_name":"内资（民营）"}],"total":3,"success":true}

界面显示的图形效果如下：