Fusionchart插件是用来显示各种各样的图表 的有用插件，我们有必要为了以后我们显示图表的时候少走弯路，来了解一下这个插件的使用。首先我们来看一下FusionChart插件可以用来显示的图表类型，我在这里只是列举几个图表类型，因为FusionChart支持很多种图表的输出，所以我们仅仅用来说明几个图表类型。
2D柱状图
3D柱状图
2D折线图
我再这里只是简单的列举了几个常用的图表类型，当然还会有很多图表我们会用到，但是FusionChart插件，如果我们可以熟练使用其中一种，那么对于其他的图表类型都是小菜一碟，所以我们拿出来一个图表饼图 作为例子。因为FusionChart接受xml格式和json两种格式，所以我们在例子中采用这两种格式的数据作为数据源来显示图表。
首先我们需要从官网下载一个实例程序，里面会包括一个FusionCharts目录，这个目录就是我们要在项目中使用的插件，其中里面有一个特别重要的js文件FusionChart.js,我们在页面上对于图表的控制显示都是通过这个js文件来操作。剩下的就是一些swf文件，它们是用来呈现图表的。
有一点我们注意一下：就是我们在项目中尽可能的添加目录的命名为FusionCharts，因为如果命名不是这样，可能会遇到一些问题，当然这存在偶然性。
因为我的示例采用的是MVC3 ，所以有些地方的标签会有些不同，但是不影响总体的理解。
我们首先在项目中添加一个FusionCharts目录，然后把下载到的FusionCharts目录中的内容全部拷贝到项目中。
然后可以使用图表进行显示。
1 @{
2 Layout = null;
5 <!DOCTYPE html>
6 <html>
7 <head>
8 <title>Index</title>
9 <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>
10 <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>
11 <script type="text/javascript">
12 $(function () {
13 var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/pie3d.swf", "chart1", "800", "600", "0");
14 chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");
15 chart.render("divChart");
17 });
20 </script>
21 </head>
22 <body>
23 <div id="divChart"></div>
24 </body>
25 </html>
其中这里有一个js方法，我们在这里有一个问题需要注意，如果不采用jquery的$();方法，那么我们必须把哪个渲染输出图表的js放到<div id="divChart" 后面，其中divChart就是要显示的图表的占位符。
pie3D.swf 表示的就是fusionChart的3D饼图，我们设置数据源为data.xml。然后通过render渲染输出，应该说比较简单易懂，我们来定义data.xml文件中的内容，这是操作fusionChart的核心。
1 <?xml version="1.0" encoding="utf-8" ?>
2 <chart caption="中国强大" subCaption="中国是世界霸主"
3 showBorder="1" startingAngle="70" bgAngle="360" bgRatio="0,100" bgColor="99ccff,ffffff"
4 enableRotation="1" enableSmartLabels="1" decimals="0" palette="4"
5 formatNumberScale="0">
6 <set label="中国" value="130000"/>
7 <set label="美国" value="20000"/>
8 <set label="法国" value="12000"/>
9 <set label="俄罗斯" value="1400"></set>
10 </chart>
其中最令人恶心的就是这里面的各种参数，我们把实例中的参数说明一下。
chart 这个应该是xml的根，是fusonChart定义的，我们在原来的版本中也可以使用graph，当然现在如果使用graph也可以，但是不推荐
caption 标题，表示的是图表显示的标题
subCaption 副标题 注意：xml是不区分大小写的
showBorder是否显示边框 为1 在fusionChart中 如果为true，即可以设置为1，为false则是0
startingAngle 初始的角度 这是相对饼图来说的 其他图表可能用不到这个参数
bgAngle 背景角度
bgRatio 背景比例，这是一个范围值，表示从0到100范围内逐渐更改 有过度效果
bgColor 背景颜色，这个也是一个范围值，表示一个逐渐更改的颜色，当然也可以只设置一个值，就表示唯一值，没有过度效果
enableRotation 是否允许旋转 为1表示可以旋转 为0则不允许旋转
decimals 举个例子来说，就是说如果一个数值为999.999，如果decimals设置为0.则显示的结果就是999.可以理解成小数位数
palette 表示采用的风格，当然是fusionChart内置的风格，从1到4
formatNumberScale 这个参数有时特别有用。比如说我们有一个值为1000，如果设置这个参数为0，则显示的时候就是1000，但是如果我们设置为1，那么显示出来就是1K。
set表示一个定位符，用来赋值
set-->label 表示的是name值，在以前的版本中就是name，但是在新版本中更新成了label，就是表示name 名称
set-->value 表示label设置的值的value
好了，一共就这么几个参数，等等，我突然想到两个参数，就是x轴和y轴的名称。XAxisName和YAxisName，因为这是饼图 没有x和y轴之说。所以我就不在实例中添加了。来看一下实际效果。
以上是通过xml格式来作为数据源，我们在项目中json也很经常用到，所以下面我们来说明一下json的使用，为了加上x和y轴，我们采用柱状图。
我们首先在HomeController中定义一个Action 返回json字符串。注意：返回的是字符串 不是jsonResult，当然如果你可以拼接出对应的json值就可以。
1 public string Json()
3 string json = "{\"chart\":{\"caption\":\"Weekly Sales Summary\",\"xAxisName\":
\"Week\",\"yAxisName\":\"Sales\",\"numberPrefix\":\"$\" },
\"data\":[{\"label\":\"Week 1\",\"value\":\"14400\"},{\"label\":\"Week 2\",
\"value\":\"19600\"},{\"label\":\"Week 3\",\"value\":\"24000\"},
{\"label\":\"Week 4\",\"value\":\"15700\"}]}";
4 return json;
前台页面我们需要设置图表的json 数据源为这个Action
1 @{
2 Layout = null;
4 <!DOCTYPE html>
5 <html>
6 <head>
7 <title>Index</title>
8 <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>
9 <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>
10 <script type="text/javascript">
11 $(function () {
12 var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/column2d.swf", "chart1", "800", "600", "0");
13 // chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");
14 // chart.render("divChart");
16 chart.setJSONUrl("@Url.Action("json", "home")");
17 chart.render("divChart");
18 });
21 </script>
22 </head>
23 <body>
24 <div id="divChart">
25 </div>
26 </body>
27 </html>
这个显示的是柱状图
哪两个坐标就是我们刚才提出的名称，好了，就说这么多，如果你用到这个插件，还是去官网好好的研究一下参数就可以搞定。很简单。
有人的地方就有政治，有政治就有斗争，但我讨厌政治，讨厌无休止的迎合。
