码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-10 00:15:45      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

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

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

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

bubuko.com,布布扣 

bubuko.com,布布扣

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

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

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/NotAnEmpty/p/4153193.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!