从服务器获取Chart的数据

最新推荐文章于 2021-09-15 17:59:34 发布

chinabluedolphin

最新推荐文章于 2021-09-15 17:59:34 发布

阅读量316

点赞数

分类专栏： javascript 文章标签： EXT Spring Servlet Adobe HTML

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

ExtJs提供了绘制图表的功能，可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果：

[img]/upload/attachment/134416/75cc0179-504c-3f75-abeb-5e29f17099b4.jpg[/img]

客户端html代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chart demo</title>

<link rel="stylesheet" type="text/css"
	href="../ext/resources/css/ext-all.css" />

<script type="text/javascript"
	src="../ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>
<body>

<div id="line-chart"></div>
<div id="pie-chart"></div>

</body>
</html>

客户端chart.js代码如下:


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

Ext.onReady(function() {

			var lineStore = new Ext.data.JsonStore({
						autoDestroy : true,
						url : '/extapp/ChartServlet',
						baseParams : {
							'type' : 'line'
						},
						root : 'data',
						fields : ['name', 'visits', 'views']
					});

			lineStore.load();

			// extra extra simple
			new Ext.Panel({
						title : '线图',
						renderTo : 'line-chart',
						width : 300,
						height : 200,
						layout : 'fit',

						items : {
							xtype : 'linechart',
							store : lineStore,
							xField : 'name',
							yField : 'visits',
							listeners : {
								itemclick : function(o) {
									var rec = lineStore.getAt(o.index);
									Ext.Msg.alert('Item Selected', 'You chose '
													+ rec.get('name'));
								}
							}
						}
					});

			var pieStore = new Ext.data.JsonStore({
						autoDestroy : true,
						url : '/extapp/ChartServlet',
						baseParams : {
							'type' : 'pie'
						},
						root : 'data',
						fields : ['season', 'total']
					});

			pieStore.load();

			// extra extra simple
			new Ext.Panel({
						title : '饼图',
						renderTo : 'pie-chart',
						width : 300,
						height : 300,
						layout : 'fit',
						items : {
							xtype : 'piechart',
							store : pieStore,
							dataField : 'total',
							categoryField : 'season',
							extraStyle : {
								legend : {
									display : 'bottom',
									padding : 5,
									font : {
										family : 'Tahoma',
										size : 13
									}
								}
							},
							listeners : {
								itemclick : function(o) {
									var rec = pieStore.getAt(o.index);
									Ext.Msg.alert('Item Selected', 'You chose '
													+ rec.get('season'));
								}
							}
						}
					});
		});

其中第一句Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';是为了使用当前服务器的文件，如果没有这句话，默认会去adobe的站点取。

折线图和饼图的数据都是通过JsonStore取得的，可以通过url属性指定提供数据的地址，通过baseParam属性指定参数，其实这两个就是向服务器发送POST命令的url地址和参数。

折线图和饼图都是通过Panel的items属性定义的。折线图的xtype是linechart，x轴和y轴通过xField，和yField定义。饼图的xtype是piechart，分类通过categoryField定义，数据通过dataField定义。两者都可以通过listeners定义事件响应函数，这里分别定义了鼠标点击事件。

以下是服务器端的servlet的代码片段：


	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doPost");

		String type = request.getParameter("type");
		System.out.println("type = " + type);

		PrintWriter out = response.getWriter();
		if (type.equals("line")) {
			out.print(lineChartData());
		} else if (type.equals("pie")) {
			out.print(pieChartData());
		}
	}


	private String lineChartData() {
		StringBuilder sb = new StringBuilder();
		sb.append("{");
		sb.append(" data : [{");
		sb.append("  name : 'Jul 07',visits : 245000,views : 3000000");
		sb.append(" },{");
		sb.append("  name : 'Aug 07',visits : 205000,views : 3000000");
		sb.append(" },{");
		sb.append("  name : 'Sep 07',visits : 115000,views : 3000000");
		sb.append(" },{");
		sb.append("  name : 'Oct 07',visits : 255000,views : 3000000");
		sb.append(" },{");
		sb.append("  name : 'Nov 07',visits : 345000,views : 3000000");
		sb.append(" },{");
		sb.append("  name : 'Dec 07',visits : 315000,views : 3000000");
		sb.append(" }]");
		sb.append("}");

		return sb.toString();
	}


	private String pieChartData() {
		StringBuilder sb = new StringBuilder();
		sb.append("{");
		sb.append(" data : [{");
		sb.append("  season: 'Summer',total: 150");
		sb.append(" },{");
		sb.append("  season: 'Fall',total: 245");
		sb.append(" },{");
		sb.append("  season: 'Winter',total: 117");
		sb.append(" },{");
		sb.append("  season: 'Spring',total: 184");
		sb.append(" }]");
		sb.append("}");

		return sb.toString();
	}

服务器端比较简单，根据参数分别返回折线图和饼图的数据。

chinabluedolphin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从服务器获取Chart的数据

ExtJs提供了绘制图表的功能，可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果：[img]/upload/attachment/134416/75cc0179-504c-3f75-abeb-5e29f17099b4.jpg[/img]客户端html代码如下:[code="html"]chart dem...
复制链接

扫一扫