FusionCharts Free（二）使用方法详细解析

有的朋友说CFC功能简单，毕竟免费版的。关于商业版（破解），需要$4999，价格不菲啊，回头介绍吧。

说白了，使用FusionCharts就是三步。1、生成XML数据源。2、引入FusionCharts组件。3、将XML关联到组件。简单吧，附上Demo。

一、生成XML数据源。

     （1）手动创建静态文件。

            比如：

            

            <?xml version="1.0" encoding="utf-8" ?>
            <graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0' >
            <set name='一月' value='462' color='AFD8F8'/>
            <set name='二月' value='857' color='F6BD0F'/>
            <set name='三月' value='671' color='8BBA00'/>
            <set name='四月' value='404' color='FF8E46'/>
            <set name='五月' value='761' color='008E8E'/>
            <set name='六月' value='960' color='D64646'/>
            <set name='七月' value='629' color='8E468E'/>
            <set name='八月' value='622' color='588526'/>
            <set name='九月' value='376' color='B3AA00'/>
            <set name='十月' value='494' color='008ED6'/>
            <set name='十一月' value='761' color='9D080D'/>
            <set name='十二月' value='960' color='A186BE'/>
            </graph>

      （2） C#创建XML文件，使用XmlHelper类

             

 #region 依据匹配XPath表达式的第一个节点来创建它的子节点(如果此节点已存在则追加一个新的同名节点
        /// <summary>
        /// 依据匹配XPath表达式的第一个节点来创建它的子节点(如果此节点已存在则追加一个新的同名节点
        /// </summary>
        /// <param name="xmlFileName">XML文档完全文件名(包含物理路径)</param>
        /// <param name="xpath">要匹配的XPath表达式(例如:"//节点名//子节点名</param>
        /// <param name="xmlNodeName">要匹配xmlNodeName的节点名称</param>
        /// <param name="innerText">节点文本值</param>
        /// <param name="xmlAttributeName">要匹配xmlAttributeName的属性名称</param>
        /// <param name="value">属性值</param>
        /// <returns>成功返回true,失败返回false</returns>
        public static bool CreateXmlNodeByXPath(string xmlFileName, string xpath, string xmlNodeName, string innerText, string xmlAttributeName, string value)
        {
            bool isSuccess = false;
            XmlDocument xmlDoc = new XmlDocument();
            try
            {
                xmlDoc.Load(xmlFileName); //加载XML文档
                XmlNode xmlNode = xmlDoc.SelectSingleNode(xpath);
                if (xmlNode != null)
                {
                    //存不存在此节点都创建
                    XmlElement subElement = xmlDoc.CreateElement(xmlNodeName);
                    subElement.InnerXml = innerText;

                    //如果属性和值参数都不为空则在此新节点上新增属性
                    if (!string.IsNullOrEmpty(xmlAttributeName) && !string.IsNullOrEmpty(value))
                    {
                        XmlAttribute xmlAttribute = xmlDoc.CreateAttribute(xmlAttributeName);
                        xmlAttribute.Value = value;
                        subElement.Attributes.Append(xmlAttribute);
                    }

                    xmlNode.AppendChild(subElement);
                }
                xmlDoc.Save(xmlFileName); //保存到XML文档
                isSuccess = true;
            }
            catch (Exception ex)
            {
                throw ex; //这里可以定义你自己的异常处理
            }
            return isSuccess;
        }
        #endregion

       这只是这个类的一个方法，当然您也可以自己写。关于这个类，后面的文章会介绍到。

 

     

     （3）用“ashx”文件输出XML字符串

       

/// <summary>
    /// PushXML 的摘要说明
    /// </summary>
    public class PushXML : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";
            StringBuilder str = new StringBuilder();
            str.Append("<?xml version='1.0' encoding='utf-8'?><graph caption='XXXXXX统计' subcaption='(从 8/6/2009 to 8/12/2009)' lineThickness='1' showValues='0' formatNumberScale='0' anchorRadius='2' divLineAlpha='20' divLineColor='CC3300' divLineIsDashed='1' showAlternateHGridColor='1' alternateHGridAlpha='5' alternateHGridColor='CC3300' shadowAlpha='40' labelStep='1' numvdivlines='5' chartRightMargin='35' bgColor='FFFFFF,CC3300' bgAngle='270' bgAlpha='10,10' xAxisName='月份' yAxisName='销售额' rotateYAxisName='0' baseFont='Arial' baseFontSize='13'>");
            str.Append("<categories>");
            str.Append("<category label='8/6/2006' />");
            str.Append("<category label='8/7/2006' />");
            str.Append("<category label='8/8/2006' />");
            str.Append("<category label='8/9/2006' />");
            str.Append("<category label='8/10/2006' />");
            str.Append("<category label='8/11/2006' />");
            str.Append("<category label='8/12/2006' />");
            str.Append("</categories>");
            str.Append("<dataset seriesName='测试1' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>");
            str.Append("<set value='1327' />");
            str.Append("<set value='1826' />");
            str.Append("<set value='1699' />");
            str.Append("<set value='1511' />");
            str.Append("<set value='1904' />");
            str.Append("<set value='1957' />");
            str.Append("<set value='1296' />");
            str.Append("</dataset>");
            str.Append("</graph>");
            context.Response.ContentEncoding = Encoding.GetEncoding("GB2312");
            context.Response.Write(str.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

   

 

 二、引入FCF插件

       （1）“object”引入

              

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Pie3D">
        <param name="movie"  value="FusionCharts/FCF_Pie3D.swf" />
        <param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500" />
        <param name="quality" value="high" />
        <embed  src="FusionCharts/FCF_Pie3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
    </object>

   

     （2）js引入

        

<head>
    <title>多图形</title>
    <script src="FusionCharts/FusionCharts.js" type="text/javascript"></script>
</head>
<body bgcolor="#ffffff">
    <div id="chartdiv1" align="center">
    First Chart Container Pie 3D   
    </div>
   <script type="text/javascript">
       var myChart1 = new FusionCharts("FusionCharts/FCF_pie3D.swf", "myChartId1", "600", "400");
       myChart1.setDataURL("Data.xml");
       myChart1.render("chartdiv1");
   </script>

</body>

 

 

     (3)Jquery、ajax异步请求

          

<head runat="server">
    <title></title>
    <script src="FusionCharts/FusionCharts.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">

      $.ajax({ url: "Default.aspx", data: { 'nocache': Math.random() }, timeout: 50000, success: function (text) {
          var myChart1 = new FusionCharts("FusionCharts/FCF_Column3D.swf", "myChartId", "600", "350");

          myChart1.setDataXML(text);
          myChart1.render("chartDiv");
      }
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="chartDiv" style=" text-align:center"></div>
    </div>
      
    </form>
</body>
</html>

 

  

（三）将XML关联到插件

       （1）setDataURL。

              这种情况是在知道XML路径的时候使用的。 当然，“ashx”文件路径也可以，因为在它里面存储的也是xml格式文本，虽然是动态的。

 

<script type="text/javascript">
        var myChart = new FusionCharts("FusionCharts/FCF_MSLine.swf", "myChartId", "800", "300");
        myChart.setDataURL("PushXML.ashx");
        myChart.render("chartdiv");
    </script>

 

 

       （2）setDataXML。

              直接指定xml字符串：

              

<script type="text/javascript">
       var myChart = new FusionCharts("FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
       myChart.setDataXML("<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0' ><set name='一月' value='462' color='AFD8F8'/><set name='二月' value='857' color='F6BD0F'/><set name='三月' value='671' color='8BBA00'/><set name='四月' value='404' color='FF8E46'/><set name='五月' value='761' color='008E8E'/><set name='六月' value='960' color='D64646'/><set name='七月' value='629' color='8E468E'/><set name='八月' value='622' color='588526'/><set name='九月' value='376' color='B3AA00'/><set name='十月' value='494' color='008ED6'/><set name='十一月' value='761' color='9D080D'/><set name='十二月' value='960' color='A186BE'/></graph>")
       myChart.render("chartdiv");
   </script>

   

 

      C#后台输出：

      

 protected void Page_Load(object sender, EventArgs e)
        {
            if (Request["nocache"] != null)
            {
                Response.Clear();
                string ds = File.ReadAllText(Server.MapPath("data.xml"), Encoding.GetEncoding("gb2312"));
                Response.Write(ds);
                Response.End();
            }
        }

 

 

      在这一节中，详细的介绍了使用CFC的三个步骤，主要是结合asp.net（C#）介绍的。下一节将介绍一下，FusionCharts中的一些参数设置和注意事项，您是不是在为了那么多的参数配置而烦恼。关于下一节FC的参数和注意事项，园子里有资料可以参考，想在其基础上完善一下。

       

       想整一个空间，帮忙点击一下，加一分吧。