ExtJs 發ajax請求到JSP 取資料 ,
把取到 的資料放在FusionChartsFree裡展現。
code:
源檔案(可直接運行)
1.getData.jsp
<!-- 這裡就沒串連資料庫了,簡單示範 ,這裡也可以是action,原理是一樣的(用action調用服務層返回資料,)--><%String xmlData = "<graph caption='流程效率統計結果' xAxisName='月份' yAxisName='數值' decimalPrecision='0' formatNumberScale='0'>"+"<set name='Jan' value='462' color='AFD8F8' />"+"<set name='Feb' value='857' color='F6BD0F' />"+"<set name='Mar' value='671' color='8BBA00' />"+"<set name='Apr' value='494' color='FF8E46'/>"+"<set name='May' value='761' color='008E8E'/>"+"<set name='Jun' value='960' color='D64646'/>"+"<set name='Jul' value='629' color='8E468E'/>"+"<set name='Aug' value='622' color='588526'/>"+"<set name='Sep' value='376' color='B3AA00'/>"+"<set name='Oct' value='494' color='008ED6'/>"+"<set name='Nov' value='761' color='9D080D'/>"+"<set name='Dec' value='960' color='A186BE'/></graph>"; out.print(xmlData);%>
2.ui.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Ext</title><link type="text/css" rel="stylesheet" href="ext-3.3.1/resources/css/ext-all.css" /><script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js" ></script><script type="text/javascript" src="ext-3.3.1/ext-all.js"></script><link rel="stylesheet" href="Contents/Style.css" type="text/css" /><script language="JavaScript" src="JSClass/FusionCharts.js"></script><script type="text/javascript">Ext.onReady(function (){try{Ext.Ajax.request({url:"getData.jsp",success:function(response){var rsMsg = response.responseText;alert(rsMsg);var url_chart = "Charts/FCF_Column2D.swf" ;var chart = new FusionCharts(url_chart,"ChartId","1000","400");chart.setDataXML(rsMsg);chart.render("chartdiv"); }});}catch(e) {alert("伺服器請求失敗.....");} }); </script></head><body><div id="chartdiv"></div></body></html>
3.圖示
code:源檔案(可直接運行)