首页 > 代码库 > FusionCharts simple demo for (html+js、APS.NET Webform、MVC)
FusionCharts simple demo for (html+js、APS.NET Webform、MVC)
做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="http://www.mamicode.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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=http://www.mamicode.com/‘12‘ />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="http://www.mamicode.com/0"></asp:ListItem> <asp:ListItem Text="饼状图" Value="http://www.mamicode.com/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 = http://www.mamicode.com/new Dictionary() {"香蕉",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=http://www.mamicode.com/‘{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="http://www.mamicode.com/@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="http://www.mamicode.com/1">柱形图</option> <option value="http://www.mamicode.com/2">饼形图</option> </select> </td> </tr> <tr> <td id="showData"> </td> </tr></table>//--------------------------action---------------------------------- public ActionResult Index() { Dictionary<string, int> data = http://www.mamicode.com/new Dictionary() {"香蕉",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=http://www.mamicode.com/‘{1}‘/>", key, dic[key]); } sb.AppendFormat("</chart>"); return sb.ToString(); }
源码：http://files.cnblogs.com/NotAnEmpty/FusionCharts.rar
FusionCharts simple demo for (html+js、APS.NET Webform、MVC)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。