介绍
FusionCharts Free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP．NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。并提供互动性和强大的图表，使用XML作为其数据接口，FusionCharts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。
优点
1、有动画和后台交互比较方便(ajax)；
2、运行在各种平台；
3、最重要的就是使用简单
开始使用
前台javascript代码(FusionCharts参数不全)
function showChart() {
$.get("Handler1.ashx", "",
function (data) {
var chatr = new FusionCharts("../Charts/FCF_Line.swf", "s2Chart", "500", "400");
/*FusionCharts参数
*第一个 指定Flash
*给图表一个id不能重复（一个页面多个图表的时候）
*flash的宽度
*flash的高度
*/
chatr.setDataXML(data); //设置文件的xml地址或者字符串
chatr.render("div1"); //渲染到id为div1的div中
});
}
xml格式
<graph caption='Monthly Unit Sales' xaxisname='Month' yaxisname='Units' shownames='1'
decimalprecision='0' formatnumberscale='0'>
<set name='1' value='422' color='AFD8F8' ></set>
<set name='2' value='857' color='F6BD0F' ></set>
<set name='3' value='671' color='8BBA00' ></set>
<set name='4' value='494' color='FF8E46' ></set>
<set name='5' value='761' color='008E8E' ></set>
<set name='6' value='960' color='D64646' ></set>
<set name='7' value='629' color='8E468E' ></set>
<set name='8' value='622' color='588526' ></set>
<set name='9' value='376' color='B3AA00' ></set>
<set name='10' value='494' color='008ED6'></set>
<set name='11' value='761' color='9D080D'></set>
<set name='12' value='960' color='A186BE'></set>
</graph>
FusionCharts常用的属性
属性 描述 图表和轴的标题及动画等 caption 标题 subcaption 副标题 xaxisname X轴的名字 yAxisName y轴的名字 animation 动画是否开启 bool类型 rotatevalues 显示的值形状 竖式1 横是0 flash背景参数 bgColor 设置flash的背景颜色 bgSWF 设置一个外部的Flash 为flash的背景 图表背景参数 canvasBgColor 设置图表背景的颜色 canvasBaseColor 设置图表基部的颜色 canvasBaseDepth 设置图表基部的高度 showCanvasBg 设置是否显示图表背景 showCanvasBase 设置是否显示图表基部 yAxisMinValue y轴最小值 yAxisMaxValue y轴最大值 字体属性 baseFont 设置字体样式 baseFontSize 设置字体大小 baseFontColor 设置字体颜色 outCnvBaseFont 设置图表外侧的字体样式 outCnvBaseFontSze 设置图表外侧的字体大小 outCnvBaseFontColor 设置图表外侧的字体颜色 数字格式选项 numberPrefix 设置数据值的前缀 numberSuffix 设置数据值的后缀 formatNumber 设置是否格式化数据 formatNumberScale 格式化数据 默认为1 自动格式化 0 不格式化 decimalSeparator 用指定的字符来代替小数点 thousandSeparator 用指定的字符来代替千位分隔符 decimalPrecision 设置十进制的精度 divLineDecimalPrecision 设置y轴数值的小数位数 limitsDecimalPrecision 设置y轴的最大最小值的小数位数 水平分隔线 numdivlines 设置水平分隔线的数量 divlinecolor 设置水平分隔线的宽度 divLineAlpha 设置水平分隔线的透明度 showDivLineValue 设置是否显示水平分隔线的数值 鼠标旋停参数 showhovercap 显示是否激活鼠标旋停效果 hoverCapBgColor 设置鼠标旋停效果的背景颜色 hoverCapBorderColor 设置鼠标旋停效果的边框颜色 hoverCapSepChar 设置鼠标旋停后显示的文本中的分隔符号 图表边距的设置 chartLeftMargin 设置图表左边距 chartRightMargin 设置图表右边距 chartTopMargin 设置图表上边距 chartBottomMargin 设置图表下边距
今天是七夕！看雷人的UC之业界良心