简单使用FusionCharts(Free)[通俗易懂]

全栈程序员站长

发布于 2022-09-07 15:41:43

6730

发布于 2022-09-07 15:41:43

大家好，又见面了，我是你们的朋友全栈君。

介绍

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	设置图表下边距