做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
新闻热点
疑难解答
