Extjs中使用FusionChart舉例

一 前言: ?
?
在項目實施中,設計統計部分經常會使用圖表進行顯示,在Extjs3中內置了圖表控件,但實際表現無法達到3D的美觀效果,通過查找FusionChart可以實現比較美觀的3D或2D圖表顯示。
?注:FusionChart是個商業圖表,不過有免費版本使用.官方網站:http://www.fusioncharts.com/

二 實現方法
?1:在Extjs中使用FusionChart需要使用到第三方插件uxChartPack(目前版本2.13,下載地址:http://code.google.com/p/uxmedia/downloads/list),在使用FusionChart前,頁面中需要引用uxmedia.js?uxflash.js?uxchart.jsuxfusion.js四個文件。
?2:代碼舉例:
??筆者使用的是彈出式窗體顯示Chart方式:
 function _Count()
{
var mk=new Ext.LoadMask(Ext.getBody(),{
msg:'正在加載數據,請稍候!',
removeMask:true//完成后移除
});
mk.show();
Ext.Ajax.request(
{
url:"CountFileManager.asp?FileCtype=30",  //后臺返回Chart需要的數據
success:function (response)
{
var Result=Ext.decode(response.responseText);
if(Result.flag!=0)
{
;
}else if(Result.flag==0)
{
var strXml=Result.strXML;
strXml="<chart caption='發布文件統計'subCaption='按發布單位統計' xAxisName='單位' yAxisName='文件數' rotateYAxisName='1' showValues='1' decimalPrecision='0' showNames='1' baseFontSize='12' outCnvBaseFontSiz='20'numberSuffix=' 個'  pieSliceDepth='30'formatNumberScale='0'>"+strXml+"</chart>"; //構造FusionChart需要的XML格式數據,這里面屬性,可參考官方文件。
var fusionPanel=new Ext.ux.Chart.Fusion.Panel({
collapsible:false,
chartCfg:{
id:'chart1',
params:{
flashVars:{
debugMode:0,
lang:'EN'
}
}
},
autoScroll:true,
id:'chartpanel',
chartURL:'charts/Column3D.swf',//定義圖表顯示類型,例如:直方,餅圖等 dataXML:strXml,
width:500,
height:310
});
var Fwin=new Ext.Window(
{
name:'Fwin',
width:'520',
height:'330',
layout:'fit',
closeAction:'close',
title:'統計圖表顯示',
buttonAlign:'center',
resizable:true,
modal:true,
items:[fusionPanel],
buttons:[
{
text:'退出',
iconCls:'icon_exit',
handler:function(){Fwin.close();}
}]
});
mk.hide();
Fwin.show();
}
},
failure:function (response)
{
mk.hide();
Ext.Msg.alert("提示","服務器請求錯誤,請稍后再試!");
}
});
}


服務器端返回字符:
{success:true,flag:0,strXML:"<set name='動力TEAM' value='1' /><set name='行政人事部' value='1' /><set name='研發中心' value='117' /><set name='運管部' value='38' /><set name='制造部' value='34' /><set name='資產財務部' value='1' />'"}

extjs中使用FusionChart舉例
???這里面要注意:頁面文件保存為utf-8格式,可消除中文亂碼現象,不同FusionChart版本,在Y軸方向存在顯示中文BUG,目前3.1版本可解決中文亂碼問題(注意是Y軸標簽進行了旋轉,如上述的rotateYAxisName='1'屬性,當然也可rotateYAxisName='0',不進行旋轉,可保證Y軸中文正常顯示)

三、部分FusionChart屬性說明:(轉摘至其他網站,供參考!)
FusionCharts參數說明
功能特性
animation ? ?? ? ?? ? ?? ? 是否動畫顯示數據,默認為 1(True)
showNames ? ?? ? ?? ? ?? ? 是否顯示橫向坐標軸(x軸)標簽名稱
rotateNames ? ?? ? ?? ? ?是否旋轉顯示標簽,默認為0(False):橫向顯示
showValues ? ?? ? ?? ? ?? ?是否在圖表顯示對應的數據值,默認為1(True)
yAxisMinValue ? ?? ? ?? ? ?指定縱軸(y軸)最小值,數字
yAxisMaxValue ? ?? ? ?? ? ??指定縱軸(y軸)最小值,數字
showLimits ? ?? ? ?? ? ?? ?是否顯示圖表限值(y軸最大、最小值),默認為1(True)
showColumnShadow ? ??是否顯示各條形圖間的陰影(若柱面圖在一起并列的話)
showAlternateHGridColor 是否隔行顯示不同顏色
圖表標題和軸名稱
caption ? ?? ? ?? ? ?? ? 圖表主標題
subCaption ? ?? ? ?? ? ?? ? 圖表副標題
xAxisName ? ?? ? ?? ? ?? ? 橫向坐標軸(x軸)名稱
yAxisName ? ?? ? ?? ? ?? ? 縱向坐標軸(y軸)名稱
imageSave='1' ? ?? 是否保存圖片
imageSaveURL='Path/FusionChartsSave.jsp '圖片路徑
hoverCapSepChar=','。鼠標放到柱面上時顯示的提示信息的分隔符
showhovercap='1' ? ?? ??鼠標放到柱面上時是否顯示提示信息?
hoverCapBgColor=‘ffffff’提示信息背景顏色
圖表和畫布的樣式
bgColor ? ?? ? ?? ? ?? ? 圖表背景色,6位16進制顏色值
canvasBgColor ? ?? ? ?? ? ?畫布背景色,6位16進制顏色值
canvasBgAlpha ? ?? ? ?? ? ?畫布透明度,[0-100]
canvasBorderColor ? ?? ? ?? 畫布邊框顏色,6位16進制顏色值
canvasBorderThickness ? ?? ? 畫布邊框厚度,[0-100]
shadowAlpha ? ?? ? ?? ? ?投影透明度,[0-100]
showLegend ? ?? ? ?? ? ?? ? 是否顯示系列名,默認為1(True)
字體屬性
baseFont ? ?? ? ?? ? ?? ? 圖表字體樣式
baseFontSize ? ?? ? ?? ? ?圖表字體大小
baseFontColor ? ?? ? ?? ? ?圖表字體顏色,6位16進制顏色值
outCnvBaseFont ? ?? ? ?? ? ?圖表畫布以外的字體樣式
outCnvBaseFontSize ? ?? ? ?? 圖表畫布以外的字體大小
outCnvBaseFontColor ? ?? ? 圖表畫布以外的字體顏色,6位16進制顏色值
分區線和網格
numDivLines ? ?? ? ?? ? ?畫布內部水平分區線條數,數字
divLineColor ? ?? ? ?? ? ?水平分區線顏色,6位16進制顏色值
divLineThickness ? ?? ? ?? 水平分區線厚度,[1-5]
divLineAlpha ? ?? ? ?? ? ?水平分區線透明度,[0-100]
showAlternateHGridColor ? ?是否在橫向網格帶交替的顏色,默認為0(False)
alternateHGridColor ? ?? ? 橫向網格帶交替的顏色,6位16進制顏色值
alternateHGridAlpha ? ?? ? 橫向網格帶的透明度,[0-100]
showDivLineValues ? ?? ? ?? 是否顯示Div行的值,默認??
numVDivLines ? ?? ? ?? ? ?畫布內部垂直分區線條數,數字
vDivLineColor ? ?? ? ?? ? ?垂直分區線顏色,6位16進制顏色值
vDivLineThickness ? ?? ? ?? 垂直分區線厚度,[1-5]
vDivLineAlpha ? ?? ? ?? ? ?垂直分區線透明度,[0-100]
showAlternateVGridColor ? ?是否在縱向網格帶交替的顏色,默認為0(False)
alternateVGridColor ? ?? ? 縱向網格帶交替的顏色,6位16進制顏色值
alternateVGridAlpha ? ?? ? 縱向網格帶的透明度,[0-100]
數字格式
numberPrefix ? ?? ? ?? ? ?增加數字前綴
numberSuffix ? ?? ? ?? ? ? 增加數字后綴? ? % 為 '%' /(噸)為‘(噸)’(Server.UrlEncode編碼)
formatNumberScale ? ?? ?是否格式化數字,默認為1(True),自動的給你的數字加上K(千)或M(百萬);若取0,則不加K或M
decimalPrecision ? ?? ? ?? 指定小數位的位數, [0-10] ?? 例如:='0' 取整
divLineDecimalPrecision ? ?指定水平分區線的值小數位的位數, [0-10]
limitsDecimalPrecision ? ?? ?指定y軸最大、最小值的小數位的位數,[0-10]
formatNumber ? ?? ? ?? ? ?逗號來分隔數字(千位,百萬位),默認為1(True);若取0,則不加分隔符
decimalSeparator ? ?? ? ?? 指定小數分隔符,默認為'.'
thousandSeparator ? ?? ? ?? 指定千分位分隔符,默認為','
Tool- tip/Hover標題
showhovercap ? ?? ? ?? ? ?是否顯示懸停說明框,默認為1(True)
hoverCapBgColor ? ?? ? ?? 懸停說明框背景色,6位16進制顏色值
hoverCapBorderColor ? ?? ? 懸停說明框邊框顏色,6位16進制顏色值
hoverCapSepChar ? ?? ? ?? 指定懸停說明框內值與值之間分隔符,默認為','
折線圖的參數
lineThickness ? ?? ? ?? ? ?折線的厚度
anchorRadius ? ?? ? ?? ? ?折線節點半徑,數字
anchorBgAlpha ? ?? ? ?? ? ?折線節點透明度,[0-100]
anchorBgColor ? ?? ? ?? ? ?折線節點填充顏色,6位16進制顏色值
anchorBorderColor ? ?? ? ?? 折線節點邊框顏色,6位16進制顏色值
Set標簽使用的參數
value ? ? ?? ? ?? ? ?? ? ? 數據值
color ? ? ?? ? ?? ? ?? ? ? 顏色
link ? ? ?? ? ?? ? ?? ? ?鏈接(本窗口打開[Url],新窗口打開[n-Url],調用JS函數[JavaScript:函數])
name ? ? ?? ? ?? ? ?? ? ?橫向坐標軸標簽名稱
showFCMenuItem='0' 設置右鍵顯示不顯示
1. varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId","600", "
500");
第一個參數是SWF 文件的地址。
第二個是圖形的id。這個id 你可以隨便叫什么,但是要注意,在后面我們講到一個頁面里有
多個圖形的時候,這個id 一定要是唯一的。
第三個參數是圖形的寬。
第四個參數是圖形的高。
我們還要設置數據文件的地址。
1. myChart.setDataURL("Data.xml");
最后,我們把圖形渲染在指定的地方。
1. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id,這就表示把圖形render 到"chartdiv"。
現在你運行JSChart.html,你會看到同Chart.html 一樣的效果。很顯然使用JavaScript加載
圖形,更方便,更直觀。

如果你想在一個新的窗口打開頁面,只需要在連接的前面加上“n-”,就像下面的代碼一樣:
1. <graph caption='Monthly Sales Summary'subcaption='For the year 2006 '
2. xAxisName='Month' yAxisName='Sales'numberPrefix='$'>
3. <set name='Jan' value='1 7400'link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8'/>
XML數據節點和常用屬性詳解
caption=‘標題‘
subcaption=‘子標題‘
clickURL=‘abc.jsp‘ 點擊整個圖表時跳轉到abc.jsp
xAxisName=部門‘
numberPrefix =‘¥’ 數據前綴單位
numberSuffix =‘個’ 數據后綴單位?
Decimals=‘2’ 保留兩位小數,四舍五入
forceDecimals=‘2’ 強制保留兩位小數,對于5.1轉換為5.10?
yAxisName=‘完成率’?
如果使用漢字漢符需加屬性:rotateYAxisName=‘1’
showValues=‘1’
yAxisMaxValue=‘100’?
對于百分比的常用bgColor='999999,FFFFFF‘
漸變bgColor=‘999999 ’ 單色
useRoundEdges=‘1’ 光線效果
baseFont=‘宋體‘
baseFontSize='12'?
baseFontColor='333333'

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276740.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276740.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276740.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

drawitem設置指定行的背景顏色_Java 為 Excel 中的行設置交替背景色

點擊上方 好好學java &#xff0c;選擇 星標 公眾號重磅資訊、干貨&#xff0c;第一時間送達今日推薦&#xff1a;牛人 20000 字的 Spring Cloud 總結&#xff0c;太硬核了~作者&#xff1a;Jazzz鏈接&#xff1a;https://www.cnblogs.com/jazz-z/p/12665819.html在制作Excel表…

常見的關系型數據庫和非關系型數據及其區別

一、關系型數據庫 關系型數據庫最典型的數據結構是表&#xff0c;由二維表及其之間的聯系所組成的一個數據組織 優點&#xff1a;1、易于維護&#xff1a;都是使用表結構&#xff0c;格式一致&#xff1b;2、使用方便&#xff1a;SQL語言通用&#xff0c;可用于復雜查詢&#x…

逆序數技巧 - 牛客

鏈接&#xff1a;https://ac.nowcoder.com/acm/contest/308/D來源&#xff1a;牛客網 題目描述 tokitsukaze給你一個長度為n的序列&#xff0c;這個序列是1到n的一種排列。然后她會進行q次操作。每次操作會給你L R k這三個數&#xff0c;表示區間[L,R]往右移動k次。移動一次的…

Ajax跨域提交JSON和JSONP

可以直接使用$.getJSON()方法實現跨域請求&#xff0c;參數中必須加上callback&#xff0c;如&#xff1a; var jsonpUrl http://www.test.com/index.php?cApi_Order&aAddOrder&callback?;var param {uid:uid,type:type,cityId:cityId};$.getJSON(jsonpUrl, param,…

mysql數據庫商業版與社區版的區別

1、商業版本組織管理與測試環節控制更嚴格&#xff0c;穩定性方面&#xff0c;會比社區版本更穩定。 2、mysql是成熟產品&#xff0c;商業版與社區版之間性能方面相差不大。 3、商業版不遵守GPL協議&#xff0c;社區版遵守GPL協議可以免費使用。 4、使用商業版后可以購買相關的…

UML的奧妙 - 學習UML筆記(1)

前兩天買了一本《大象 Thinking in UML》&#xff0c;其實本就有學習UML的念頭&#xff0c;但都因這樣那樣的事兒耽擱了&#xff0c;當然&#xff0c;也有些惰性在作祟...... 閑話少說&#xff0c;這本書看完了一章&#xff0c;發現還是不錯的&#xff0c;先把這兩天的學習情況…

無法檢查指定的位置是否位于cfs上_(干貨分享)一文搞明白 節氣門位置傳感器的作用、故障類型與癥狀、診斷方法...

1 位置節氣門位置傳感器(ThrottlePositionSensor&#xff0c;TPS)&#xff0c;位于節氣門體上&#xff0c;其安裝形式因節氣門結構的不同而有所差異&#xff1a;對于傳統的機械拉索式節氣門&#xff0c;節氣門位置傳感器通常以一個獨立元件的形式安裝在節氣門體的側面&#xf…

盒子模型

1 <!doctype html>2 <html>3 <head>4 <title>盒子模型</title>5 <meta charset"utf-8">6 <meta name"keywords", content"">7 <meta name"description&…

表單跨域提交

利用form表單跨域post 現在ajax應用這么廣泛&#xff0c;一般的應用都是直接通過異步調用就可以了&#xff0c;但是有些東西必須要使用post&#xff0c;而且是跨域的時候&#xff0c;ajax異步調用的方式就無能為力了。當然現在也有很多種辦法&#xff0c;比如通過flash中轉去po…

Asp.net(C#)-顯示所有緩存 清除所有緩存

//清除所有緩存protectedvoidRemoveAllCache() { System.Web.Caching.Cache _cache HttpRuntime.Cache; IDictionaryEnumerator CacheEnum _cache.GetEnumerator(); ArrayList al new ArrayList(); while (CacheEnum.MoveNext()) { …

mysql數據庫三大引擎優缺點

1.MyISAM 特性&#xff1a; ①不支持事務。 ②表級鎖定&#xff0c;并發性能大大降低。 ③讀寫互相阻塞。 適用場景&#xff1a; ①不支持事務。 ②并發相對較低&#xff0c;表鎖定。 ③執行大量select語句操作的表。 ④count(*)操作較快。 ⑤不支持外鍵。 注&#xff1a;查詢速…

Python--day60--一個簡單(不完整)的web框架

轉載于:https://www.cnblogs.com/xudj/p/10091775.html

activemq 發兩條只收到一條_淺談ActiveMQ與使用

更多大數據架構、實戰經驗&#xff0c;歡迎關注【大數據每日嗶嗶】&#xff0c;期待與你一起成長&#xff01;本文將介紹一下 ActiveMQ 的安裝、原理和簡單實戰。一、什么是消息中間件消息中間件顧名思義實現的就是在兩個系統或兩個客戶端之間進行消息傳送二、什么是ActiveMQAc…

php發送get、post請求的幾種方法

方法1: 用file_get_contents 以get方式獲取內容 <?php $urlhttp://www.domain.com/; $html file_get_contents($url); echo $html; ?>方法2: 用fopen打開url, 以get方式獲取內容<?php $fp fopen($url, r); stream_get_meta_data($fp); while(!feof($fp)) { $res…

ZZ:深入理解new

new的過程當我們使用關鍵字new在堆上動態創建一個對象時&#xff0c;它實際上做了三件事&#xff1a;獲得一塊內存空間、調用構造函數、返回正確的指針。當然&#xff0c;如果我們創建的是簡單類型的變量&#xff0c;那么第二步會被省略。假如我們定義了如下一個類A&#xff1a…

mysql數據庫的優缺點

優點1. 通常存儲過程 標題有助于提高應用程序的性能。因為當你創建他的時候就已經編譯了&#xff0c;只不過是按需編譯的。2.存儲過程有助于減少應用程序和數據庫服務器之間的流量&#xff0c;因為應用程序不必發送多個冗長的SQL語句&#xff0c;而只能發送存儲過程的名稱和參數…

大數據小白系列——HDFS(1)

【注1&#xff1a;結尾有大福利&#xff01;】 【注2&#xff1a;想寫一個大數據小白系列&#xff0c;介紹大數據生態系統中的主要成員&#xff0c;理解其原理&#xff0c;明白其用途&#xff0c;萬一有用呢&#xff0c;對不對。】 大數據是什么&#xff1f;拋開那些高大上但籠…

PHP檢測遠端文件是否存在

簡單解釋一下上面的代碼。get_headers的作用就是訪問一個遠程地址&#xff0c;把服務器發送的HTTP頭以數組形式返回。而$header[0]則是服務器返回的狀態碼&#xff08;如果不出意外的話狀態碼應該都是第一個返回的&#xff09;。 要確定一個文件在遠端服務器上存在&#xff0c…

C#中使用DTS來導入數據及相關問題

向Sql 中導入Excel數據時&#xff0c;使用MS SQL的DTS功能 可以很方便的導入&#xff0c;同時引用Dll文件&#xff0c;可以在程序中對導入過程進行控制。 創建DTS包的過程如下&#xff1a; &#xff11;。在&#xff33;&#xff31;&#xff2c;企業管理器中&#xff0c;工具菜…

html select選擇事件_一道搜狗面試題:IO多路復用中select、poll、epoll之間的區別...

(1)select>時間復雜度O(n)它僅僅知道了&#xff0c;有I/O事件發生了&#xff0c;卻并不知道是哪那幾個流(可能有一個&#xff0c;多個&#xff0c;甚至全部)&#xff0c;我們只能無差別輪詢所有流&#xff0c;找出能讀出數據&#xff0c;或者寫入數據的流&#xff0c;對他們…