ExtJs+FusionChartsFree+jsp

來源:互聯網
上載者:User

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:源檔案(可直接運行)


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.