简单使用FusionCharts(Free)

介绍

     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之业界良心

posted @ 2013-08-13 22:32  秋壶冰月  阅读(1619)  评论(0编辑  收藏