FusionCharts使用详解+实例+图解+Demo

来源：互联网发布：未来人6小时视频知乎编辑：程序博客网时间：2024/05/16 10:20

一、简介
FusionCharts 是InfoSoft Global 公司的一个产品，InfoSoft Global 公司是专业的Flash 图形方案提供商，他们还有几款其他的，基于Flash 技术的产品，都非常的漂亮。
FusionCharts Free 则是FusionCharts 提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。

FusionCharts free 是一个跨平台，跨浏览器的flash 图表组件解决方案，能够被ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单HTML 页面甚至PPT 调用。

二、报表图形对应的swf文件分类

四、安装使用
1. 在web项目目录下新建一个文件夹( 如FusionCharts)，并把所有的SWF 文件都拷贝到这个文件夹里。
2. 在页面导入FusionCharts.js 文件，如：
<script type="text/javascript" src="FusionCharts.js"></script>
3. js加载数据生成报表(有两种方法)
方法一：xml文件引用法
(1)定义一个固定格式的xml文件（以Data.xml为例）
Date.xml的内容如下：

(2) js加载方法，代码如下：

<div id=”chartdiv1”></div>
<script type="text/javascript">　　`
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");　　　　　 myChart2.setDataURL("Data.xml");　　　　
　 myChart2.render("chartdiv1");　　　
</script>方法二：字符串加载法
（1）定义一个有固定格式的字符串，即可以将上述xml文件组合成字符串

var dataXml = “<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>”;

（2）js加载方法，代码如下：

<div id=”chartdiv1”></div>
<script type="text/javascript">　　
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");　　　　
　myChart2.setDataURL(dataXml);　　　　
　myChart2.render("chartdiv1");　　　
</script>

四、引起flash图像不能显示的可能原因
（一）如果没有在页面上看到图形，可能是下面的原因之一：

1. SWF没有放到正确的文件夹。
2. 在html文件里，SWF的路径设置不正确。
3. 没有安装Flash Player。
4. 没有启用浏览器Flash播放选项。

（二）如果你得到了一个“Error in Loading Data”的消息，可能是：

1. xml文件没放到正确的文件夹。
2. xml的文件名不正确。比如，你可能不小心把它命名Data.xml.txt。

（三）如果你得到了一个“Invalid XML Data”的消息，可能是：　　

1. xml文件里的内容有错误。
2.页面图表显示“正在载入数据”，图表不显示，后台控制台报错属性没有定义，多半是数据中有空项；

五、属性/效果展示

提示信息（toolText）多行分段显示，使用伪代码 {BR} 来进行分段处理；
横坐标信息倾斜显示：<graph rotateNames='1' slantLabels='1'...
横坐标信息到图表的距离：labelPadding='10'
数据默认保留两位小数：decimalPrecision='2'
图例不显示：showLegend='0'
图表距离左边的距离 chartLeftMargin='180'
纵坐标数据后面加后缀 “%”：numberSuffix = '%'
图表上不显示数据：showValues='0'
设置画布背景和画布基座是否显示；showCanvasBase='0' showCanvasBg='0' chartLeftMargin='180' numberSuffix = '%' showValues='0'
横坐标标签倾斜显示：rotateNames='1' slantLabels='1'

0 0