fusionchartsfree学习笔记整理
一、概述
FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。
FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。
二、目录介绍
文件下载地址： http://pan.baidu.com/s/1mgKOaqk
目录结构：
SWF文件（创建图形主要靠它们了）
所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹下
FusionCharts JavaScript和样式文件
FusionCharts
JavaScript文件放在FusionChartsFree>JSClass文件夹。
示例代码
所有的代码都放在FusionChartsFree>Code文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。
图形例子
放在FusionChartsFree>Gallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它（打开index.html>Sample Charts）。
文档
文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。
三、我的第一个图形
在介绍完了FCF的下载安装以后，现在，我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。
要使用FCF来创建图形，你需要做下面三件事情：
1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了，所有的SWF文件都放在FusionChartsFree>Charts文件夹里。
2.XML数据文件。FCF只接受基于XML格式的数据。因此，你需要把你的数据转成XML格式。
3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。
在项目里新建以一个文件夹命名：FusionChartsFree 把 Charts文件夹和JSClass 直接拖进项目里
创建XML数据文件：
<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='494' 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>
上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
好了数据源有了现在就实现圆柱形报表吧
方法一：采用Jquery 方式实现
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">
图形将出现这个DIV里，到时这里的字将被图形替代。</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
方法2：
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="500" height="300" name="ChartID2">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="/FusionChartsFree/Charts/Column3D.swf" />
<param name="FlashVars" value="&chartWidth=500&chartHeight=300&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' link='n-https://www.baidu.com/' /><set name='Jan' value='500' color='F6BD0F'/><set name='Jan' value='300' color='8BBA00'/><set name='Jan' value='440' color='8E468E'/></graph>" />
<param name="quality" value="high" />
<embed src="/FusionChartsFree/Charts/Column3D.swf" flashvars="&chartWidth=500&chartHeight=300&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' link='n-https://www.baidu.com/' /><set name='Jan' value='500' color='F6BD0F'/><set name='Jan' value='300' color='8BBA00'/><set name='Jan' value='440' color='8E468E'/></graph>"
quality="high" width="500" height="300" name="ChartID2" allowscriptaccess="always"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
动态生成
后台调用
Literal4.Text = FusionCharts.RenderChartHTML("/FusionChartsFree/Charts/Column3D.swf", "", smlstirng.ToString(), "ChartID2", "500", "300");
参数3 可以从数据库去数据源 要保证数据源是字符串格式的数据源
/// <summary> /// 拼接XML /// </summary> /// <param name="chartSWF"></param> /// <param name="strURL">XML路径</param> /// <param name="strXML">用字符串来拼接XML格式</param> /// <param name="chartId">图形的名字(可以随便取但要保证它的唯一性)</param> /// <param name="chartWidth"></param> /// <param name="chartHeight"></param> /// <returns></returns> public static string RenderChartHTML(string chartSWF, string strURL, string strXML, string chartId, string chartWidth, string chartHeight) { StringBuilder builder = new StringBuilder(); string str = string.Empty; if (strXML.Length == 0) { str = string.Format("&chartWidth={0}&chartHeight={1}&dataURL={2}", new object[] { chartWidth, chartHeight, strURL }); } else { str = string.Format("&chartWidth={0}&chartHeight={1}&dataXML={2}", new object[] { chartWidth, chartHeight, strXML }); } builder.AppendFormat("<!-- START Code Block for Chart {0} -->" + Environment.NewLine, chartId); builder.AppendFormat("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\" width=\"{0}\" height=\"{1}\" name=\"{2}\">" + Environment.NewLine, chartWidth, chartHeight, chartId); builder.Append("<param name=\"allowScriptAccess\" value=\"always\" />" + Environment.NewLine); builder.AppendFormat("<param name=\"movie\" value=\"{0}\"/>" + Environment.NewLine, chartSWF); builder.AppendFormat("<param name=\"FlashVars\" value=\"{0}\" />" + Environment.NewLine, str); builder.Append("<param name=\"quality\" value=\"high\" />" + Environment.NewLine); builder.AppendFormat("<embed src=\"{0}\" FlashVars=\"{1}\" quality=\"high\" width=\"{2}\" height=\"{3}\" name=\"{4}\" allowScriptAccess=\"always\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />" + Environment.NewLine, new object[] { chartSWF, str, chartWidth, chartHeight, chartId }); builder.Append("</object>" + Environment.NewLine); builder.AppendFormat("<!-- END Code Block for Chart {0} -->" + Environment.NewLine, chartId); return builder.ToString(); }
浙公网安备 33010602011771号