Ext--从服务器获取Chart的数据
ExtJs提供了绘制图表的功能，可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果：
客户端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>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>chartdemo</title>
<linkrel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css" />
<scripttype="text/javascript"
src="../ext/adapter/ext/ext-base-debug.js"></script>
<scripttype="text/javascript"src="../ext/ext-all-debug.js"></script>
<scripttype="text/javascript" src="chart.js"></script>
</head>
<body>
<divid="line-chart"></div>
<divid="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'
- }, //baseParams会以参数形式附在servlet后面传到后台
- root : 'data',
- fields :
最低0.47元/天 解锁文章
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
