·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> FusionCharts simple demo for (html+js、APS.NET Webform、MVC)

【如有意向点此提交需求】关于我们

FusionCharts simple demo for (html+js、APS.NET Webform、MVC)

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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="/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.cnblogs.com/NotAnEmpty/FusionCharts.rar