FusionCharts

　　上一篇已经介绍了一款免费的JS图表插件，这一篇再介绍另一款图表插件，同样是免费的，同样是基于JS的，使用依然很简单。该插件的官方网站，貌似也是收费的，我们可以下载对应的免费版FusionCharts free。FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，使用FusionCharts ，您不必安装任何在您的服务器上。所有您需要做的只是复制粘贴的SWF文件（核心文件FusionCharts ）到您的服务器，然后添加XML格式的数据源，其他任何复杂的操作都不用。

　　现在官方网站上提供的demo，支持XML和JSON两种格式的数据源，但是从FusionCharts free下载的免费版的只能使用XML作为数据源，还有就是收费版的flash效果比免费版的好，其他的好像没什么区别，免费版的提供的功能已经足够了。

　　下载之后，我们的文档结构图如下：

　　

　　只需要将JSClass文件夹中的FusionCharts.js文件以及Charts文件夹中的*.swf文件添加到项目中，因为FusionCharts是一个Flash的图表组件，需要SWF文件来运行，所以这个.js文件和.swf文件是必不可少的，切记。

　　下面通过代码实现一个线形图（有两条线构成）：

　　后台返回的XML数据：

   /// <summary>
         /// 加载指定条数的用户登录信息
         /// </summary>
         /// <param name="count"></param>
         private void LoginInfoListXML(int count)
         {
             IList<dynamic> sysLoginLogList = sysLoginLogBLL.GetSysLoginLogList(count);

             IList<dynamic> sysLoginLogListByUserId = sysLoginLogBLL.GetSysLoginLogListByUserId(count);

             string jsonStr = "<graph caption='产品配置器使用统计' subCaption='' baseFontSize='12' baseFontColor='8E5C15' numVDivLines='30' numdivlines='4' showValues='0' anchorRadius='3' anchorBgAlpha='20' anchorSides='10' rotateNames='1' lineThickness='2' divLineAlpha='40' showAlternateHGridColor='1' ";
             jsonStr += " alternateVGridAlpha='30' shadowAlpha='40' vDivlinecolor='8E5C15' limitsDecimalPrecision='0' divLineDecimalPrecision='0' decimalPrecision='0' >";

             string category = "<categories>";

             string dataset = "";

             #region 每天访问人数
             dataset += "<dataset renderAs='Line' seriesName='使用人数' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>";
             if (sysLoginLogList != null)
             {
                 DateTime dt = DateTime.Now;
                 dt = dt.AddDays(-31);
                 for (int i = 0; i < 30; i++)
                 {
                     dt = dt.AddDays(1);
                     bool flag = false;
                     foreach (var item in sysLoginLogList)
                     {
                         if (dt.ToString("yyyy/MM/dd") == item.pvdata)
                         {
                             flag = true;
                             dataset += "<set value='" + item.pvcount + "'/>";
                             category += "<category name='" + item.pvdata + "'/>";
                         }
                     }

                     if (!flag)
                     {
                         dataset += "<set value='" + 0 + "'/>";
                         category += "<category name='" + dt.ToString("yyyy/MM/dd") + "'/>";
                     }
                 }
             }
             category += "</categories>";

             dataset += "</dataset>";
             #endregion

             #region 每天的访问人次
             dataset += "<dataset renderAs='Line' seriesName='使用人次' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>";
             if (sysLoginLogListByUserId != null)
             {
                 DateTime dt = DateTime.Now;
                 dt = dt.AddDays(-31);
                 for (int i = 0; i < 30; i++)
                 {
                     dt = dt.AddDays(1);
                     bool flag = false;
                     foreach (var item in sysLoginLogListByUserId)
                     {
                         if (dt.ToString("yyyy/MM/dd") == item.pvdata)
                         {
                             flag = true;
                             dataset += "<set  value='" + item.pvcount + "'/>";
                         }
                     }

                     if (!flag)
                     {
                         dataset += "<set value='" + 0 + "'/>";
                     }
                 }
             }

             dataset += "</dataset>";

             ///拼接Categories
             jsonStr += category;
             ///拼接dataset
             jsonStr += dataset;
             jsonStr += "</graph>";

             #endregion

             strResponse = jsonStr;
         }

　　前台页面接收XML数据，图表展示：

   $(function () {
             $.ajax({
                 type: "GET",
                 dataType: "json",
                 url: "/Chart/LoadingByCount",
                 error: function (XmlHttpRequest, textStatus, errorThrown) { alert(errorThrown); },
                 success: function (result) {
                     var array = result.StrResponse;

                     var myChart = new FusionCharts(strSite + "Charts/FCF_MSLine.swf", "ChartId", "1000", "320", "0", "0");
                     //setDataXML("<xml></xml>");
                     //setDataURL("JsonData/data.xml");
                     myChart.setDataXML(array);
                     //  myChart.addParam("wmode", "Opaque");
                     myChart.render("fsfcontainer");
                 }
             });
         });

　　前台页面中只需要将返回的XML数据作为数据源，其他的图表属性可以再详细的去网上查找资料。

　　FusionCharts的重要熟悉：setDataXML（为FusionCharts指定数据源，参数是XML格式的字符串）、setDataURL（为FusionCharts指定数据源，参数是真实的.XML的文件路径）、render（图表渲染）。

　　下面通过代码实现一个柱状图：

　　后台返回的XML数据：　　

   /// <summary>
         /// 加载指定条数的下载记录
         /// </summary>
         private void DownloadListXML(int count)
         {
             #region 下载记录
             //int count = 30;
             IList<dynamic> downloadList = sysDownloadLogBLL.GetDownloadList(count);
             string xmlStr = "<graph caption='产品配置器下载统计' xAxisName='' yAxisName='' baseFontSize='12' baseFontColor='8E5C15' rotateNames='1' decimalPrecision='0' formatNumberScale='0' >";

             string[] strColor = new string[] { "AFD8F8", "F6BD0F", "8BBA00", "FF8E46", "008E8E", "D64646", "8E468E", "588526", "B3AA00", "008ED6", "9D080D", "A186BE", "#9422FB", "#2BFB22", "#E8FB22", "#6C22FB", "#22A9FB",
                                            "#B422FB","#FB8B22","#9C47E0","#513269","#431B61","#8E657F","#BA1B50","#87C04F","#8A791A","#2BC3CA","#2B46CA","#D3B4E0","#FBBDF3"};

             if (downloadList != null)
             {
                 DateTime dt = DateTime.Now;
                 dt = dt.AddDays(-31);
                 for (int i = 0; i < 30; i++)
                 {
                     dt = dt.AddDays(1);
                     bool flag = false;
                     foreach (var item in downloadList)
                     {
                         if (dt.ToString("yyyy/MM/dd") == item.pvdata)
                         {
                             flag = true;
                             xmlStr += "<set name='" + item.pvdata + "' value='" + item.pvcount + "' color='" + strColor[i] + "' />";
                         }
                     }

                     if (!flag)
                     {
                         xmlStr += "<set name='" + dt.ToString("yyyy/MM/dd") + "' value='" + 0 + "' color='" + strColor[i] + "' />";
                     }
                 }
             }

             xmlStr += "</graph>";
             #endregion

             strResponse = xmlStr;
         }

　　前台页面接收XML数据，图表展示：

  $(function () {
             $.ajax({
                 type: "GET",
                 dataType: "json",
                 url: "/Chart/LoadingByDownload",
                 error: function (XmlHttpRequest, textStatus, errorThrown) { alert(errorThrown); },
                 success: function (result) {
                     var array = result.StrResponse;

                     ///下载记录chart
                     var downloadChart = new FusionCharts(strSite + "Charts/FCF_Column3D.swf", "ChartId2", "1000", "320", "0", "0");
                     downloadChart.setDataXML(array);
                     downloadChart.render("downloadcontainer");
                 }
             });
         });

　　线形图和柱状图的区别就是在后台拼接XML字符串的时候，XML中的元素构成不同，以及在前台页面中调用的 .swf 文件不同，线形图是FCF_MSLine.swf，而柱状图是FCF_Column3D.swf，其他的也就没什么不同了。

　　上传一张我们项目中的实际效果图吧，感觉还不错吧，感觉动手尝试一下把，很easy的~~~~

　　

　　

　　

　　

　　都是测试库，数据不太准确，绘制的图表看的不是很美观。。。