FusionCharts simple demo for (html+js、APS.NET Webform、MVC)_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > FusionCharts simple demo for (html+js、APS.NET Webform、MVC)

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

 2014/12/10 2:53:02  whyfine  程序员俱乐部  我要评论(0)
  • 摘要:做GIS或其他内部数据统计项目的应该对FusionCharts也不会太陌生,简单易用已无需多说什么了,只是有时候框架不同,实现起来也稍有差异引用dll调用FusionCharts类的静态方法RenderChartHTML返回html绑定在数据控件上更为符合webform;使用JS代码newFusionCharts对象,调用对象的setDataXML或者setDataURL方法更为符合MVC1、HTML+JS<!--html--><htmlxmlns="http://www
  • 标签:.net MVC for Web net Fusion JS

  做GIS或其他内部数据统计项目的应该对FusionCharts也不会太陌生,简单易用已无需多说什么了,只是有时候框架不同,实现起来也稍有差异

  引用dll调用FusionCharts类的静态方法RenderChartHTML 返回html绑定在数据控件上更为符合webform;

  使用JS代码new FusionCharts对象,调用对象的setDataXML或者setDataURL方法更为符合MVC

 

1、HTML+JS

class="brush:html;gutter:true;"><!--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

上一篇: ASP.NET MVC 5 + EF 6 入门教程 (5) Model和Entity Framework 下一篇: 没有下一篇了!
发表评论
用户名: 匿名