做GIS或其他內部數據統計項目的應該對FusionCharts也不會太陌生，簡單易用已無需多說什么了，只是有時候框架不同，實現起來也稍有差異
引用dll調用FusionCharts類的靜態方法RenderChartHTML 返回html綁定在數據控件上更為符合webform；
使用JS代碼new FusionCharts對象，調用對象的setDataxml或者setDataURL方法更為符合MVC
1、HTML+JS
<!--html--><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="/package/FusionCharts/Charts/FusionCharts.js" type="text/Javascript"></script> <script type="text/javascript"> $(function () { initChars(); }) function initChars() { var chart = new FusionCharts("/package/FusionCharts/Charts/2Column3D.swf", "ChartId", "600", "350"); //1、加載字符串 //var dataXml = "<chart rotateYAxisName='0' baseFont='微軟雅黑' baseFontSize='12' caption='' yAxisName='水果數量' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'><set label='香蕉' value='12' /><set label='橘子' value='55' /><set label='蘋果' value='23' /><set label='人參果' value='20' /></chart>"; //chart.setDataXML(dataXml); //2、加載xml chart.setDataURL("/package/FusionCharts/FruitsData.xml"); chart.render("showData"); } </script></head><body> <div id="showData"> </div></body></html><!--xml--><chart rotateYAxisName='0' baseFont='微軟雅黑' baseFontSize='12' caption='' yAxisName='水果數量' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'> <set label='香蕉' value='12' /> <set label='橘子' value='55' /> <set label='蘋果' value='23' /> <set label='人參果' value='20' /></chart>
2、asp.net Webform
<!-------------aspx----------------><form id="form1" runat="server"> <div> <table id="tbl" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"> <asp:ListItem Text="柱狀圖" Value="0"></asp:ListItem> <asp:ListItem Text="餅狀圖" Value="1"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> <asp:Panel ID="Panel1" runat="server"> </asp:Panel> </td> </tr> </table> </div> </form> <!-------------code behind---------------->PRotected void Page_Load(object sender, EventArgs e) { Panel1.Controls.Clear(); Dictionary<string, int> data = new Dictionary<string, int>() { {"香蕉",12}, {"橘子",55}, {"蘋果",23}, {"人參果",20} }; Panel1.Controls.Add(ShowNewChart(data, DropDownList1.SelectedValue, "數量")); } /// <summary> /// 綁定圖形數據 /// </summary> /// <param name="dic">數據</param> /// <param name="Type">圖形類型</param> /// <param name="yAxisName">柱狀圖顯示標題</param> /// <returns></returns> private LiteralControl ShowNewChart(Dictionary<string, int> dic, string Type, string yAxisName) { StringBuilder sb = new StringBuilder(); sb.Append("<chart rotateYAxisName='0' baseFont='微軟雅黑' baseFontSize='12' caption='' xAxisName='' yAxisName='" + yAxisName + "' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'>"); foreach (string key in dic.Keys) { sb.AppendFormat("<set label='{0}' value='{1}'/>", key, dic[key]); } sb.AppendFormat("</chart>"); string types = ""; if (Type == "1") { //餅狀圖 swf路徑 types = "package/FusionCharts/Charts/Pie3D.swf"; } else if (Type == "0") { //柱狀圖 types = "package/FusionCharts/Charts/2Column3D.swf"; } return new LiteralControl(FusionCharts.RenderChartHTML(types, "", sb.ToString(), "chart1", "650", "250", false, false)); }
3、ASP.NET MVC
//--------------------------view----------------------------------<script src="@Url.Content("~/package/FusionCharts/Charts/FusionCharts.js")" type="text/javascript"></script><script type="text/javascript"> $(function () { initChars('@Url.Content("~/package/FusionCharts/Charts/2Column3D.swf")'); BindslMapTypeChange(); }) //初始化圖表 function initChars(fusionChartsPath) { var chart = new FusionCharts(fusionChartsPath, "ChartId", "600", "350"); chart.setDataXML("@(new MvcHtmlString(ViewData.Model))"); chart.render("showData"); } //綁定圖表類型選擇按鈕事件 function BindslMapTypeChange() { $('#slMapType').change(function () { if ($(this).val() == "1") { initChars('@Url.Content("~/package/FusionCharts/Charts/2Column3D.swf")'); } else { initChars('@Url.Content("~/package/FusionCharts/Charts/Pie3D.swf")'); } }) }</script><table border="0" cellpadding="0" cellspacing="0"> <tr> <td> 圖形類型：<select id="slMapType"><option value="1">柱形圖</option> <option value="2">餅形圖</option> </select> </td> </tr> <tr> <td id="showData"> </td> </tr></table>//--------------------------action---------------------------------- public ActionResult Index() { Dictionary<string, int> data = new Dictionary<string, int>() { {"香蕉",12}, {"橘子",55}, {"蘋果",23}, {"人參果",20} }; ViewData.Model = GetChartXml(data, "水果數量"); return View(); } /// <summary> /// 綁定圖形數據 /// </summary> /// <param name="dic">數據</param> /// <param name="Type">圖形類型</param> /// <param name="yAxisName">柱狀圖顯示標題</param> /// <returns></returns> private string GetChartXml(Dictionary<string, int> dic, string yAxisName) { StringBuilder sb = new StringBuilder(); sb.Append("<chart rotateYAxisName='0' baseFont='微軟雅黑' baseFontSize='12' caption='' xAxisName='' yAxisName='" + yAxisName + "' bgcolor='FFFFFF' bgalpha='100' showValues='1' formatNumberScale='0' showBorder='0'>"); foreach (string key in dic.Keys) { sb.AppendFormat("<set name='{0}' value='{1}'/>", key, dic[key]); } sb.AppendFormat("</chart>"); return sb.ToString(); }
源碼：http://files.VEVb.com/NotAnEmpty/FusionCharts.rar
新聞熱點
疑難解答
