轉帖|其它|編輯:郝浩|2012-01-19 23:57:08.000|閱讀 850 次
概述:在上文”flash圖表控件FusionCharts在winform中的運用(一)”中,介紹了Line2D的FusionCharts圖表的XML基本屬性。本文將介紹如何在WinForm中顯示圖表,并且通過按鈕點擊顯示不同的圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在上文”flash圖表控件FusionCharts在winform中的運用(一)”中,介紹了Line2D的FusionCharts圖表的XML基本屬性。
本文將介紹如何在WinForm中顯示圖表,并且通過按鈕點擊顯示不同的圖表。
在WinForm中顯示SWF文件,有兩種途徑,一個是利用Flash控件;一個是利用WebBrowser控件;本文利用的是后者。WebBrowser控件通過顯示包含SWF文件的HTML文件,來達到顯示SWF文件的目的。
首先,準備好外部文件:
FusionCharts.js;這個是FusionCharts的JS文件。在官方的免費包里。
FCF_Line.swf;這個是FusionCharts的SWF文件,用來顯示圖表的,在官方的免費包里。
1.xml;圖表數據一,自己構造的XML圖表數據。
2.xml;圖表數據二,自己構造的XML圖表數據,和前一個文件屬性相同,只是數據點的數據不同。
Line2D.html;包含SWF文件的HTML文件。內容如下:
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Free Documentation</title>
<script language="JavaScript" src="FusionCharts.js"></script>
<script language="javascript">var query=location.search.substring(5);
</script>
</head>
<body style="margin:0px;">
<div style="width:600px;">
<div id="chartdiv" align="center">
FusionCharts.
</div>
<script type="text/javascript">
var chart = new FusionCharts("FCF_Line.swf", "ChartId", "600", "350"); chart.setDataURL(query);
chart.render("chartdiv");
</script>
</div>
</body>
這個文件的關鍵有這幾個方面:
1、var query=location.search.substring(5);。這句話是JS來獲取HTML的傳入參數。在使用的時候,WebBrowse控件是采用Line2D.html?url=2.xml的形式,那么前面的這句話就是獲得2.xml這個外部數據文件名。
2、<body style="margin:0px;">。這句話是把頁面的留白去掉。
3、chart.setDataURL(query); 。這句話的意思是根據前面獲得的文件名,動態的獲得數據。
文件準備好后,在Winform上拖動控件,兩個Button,一個WebBrowse控件。
WebBrowse控件的屬性設置如下:
IsWebBrowserContextMenuEnabled = False;不顯示WebBrowser的上下文菜單
Width = 600
Height = 350
ScrollBarsEnabled = False;不顯示滾動條
WebBrowserShortcutsEnabled = False;不顯示WebBrowser的快捷菜單。
在Form的Actived的事件中,添加如下代碼,默認顯示第一個圖表
WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=1.xml")
在Button1的Click事件中,添加如下代碼,顯示第一個圖表
WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=1.xml")
在Button2的Click事件中,添加如下代碼,顯示第二個圖表
WebBrowser1.Navigate(Application.StartupPath & "\Line2D.html?url=2.xml")
至此,效果完成。下面是兩個效果圖。
點擊Button1的效果:
點擊Button2的效果:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:網絡轉載