本文共 1588 字，大约阅读时间需要 5 分钟。
最近leader让学习fusioncharts相关内容，我花了一下午的时间学习了相关知识，并且用vs绘制了一副图表，把心得记录下来，仅供像我一样的新手学习，勿喷，大牛绕道。用了两种方法，一种是将xml或json数据直接嵌在javascript代码段中，另一种是将xml或json单独写成资源文件，在html中引用。这部分网上资料比较杂，而且因为fusioncharts版本更新导致前后用法不太一样，整理出正确完整的思路花了点时间。本文仅演示xml数据源的例子，json的自己把关键内容换一下就行，大差不差的。
一。easy模式，直接嵌入xml数据
1.首先到官网上下载fusioncharts的文件包
2.打开vs，创建一个新的web工程，empty的即可
3.将第一步下载的文件包里的js文件夹里的所有javascript文件拷到工程目录下
4.在工程里新建html文件（右键->add->HTMLpage)
5.代码如下：
My First chart using FusionCharts Suite XT FusionCharts XT will load here!
代码逻辑很简单，javascript代码块里创建一个myChart变量，
type属性表明了你画的是2D（column2d）还是3D（column3d）图形
"renderAt"表示你要将图表渲染在页面的哪个地方，与后面<body>的div id="chartContainer"对应
dataFormat表明你用的数据来源是xml格式还是json格式，dataSource里封装了xml数据
最最重要的一点！！！ <script type="text/javascript" src="fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts.theme.fint.js"></script>这里的路径一定要写对了，根据你的工程，你将这两个js文件放在哪了就写哪。天知道这个疏忽花了我多长时间。。。。
6.F5运行，截图如下;
二。hard模式-将xml或json单独写成资源文件，在html中引用
其实呢，这个也没有难多少，这样使代码更简洁易读
1，2，3步同easy模式
4.新建一个xml文件，命名为data.xml，文件内容如下：
5.新建一个html文件，内容如下：
My First chart using FusionCharts Suite XT FusionCharts XT will load here!
代码逻辑也不难
<1>建立对象：
用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("Column3D", "myChartId", "600", "500");
第一个参数是图形样式2D or 3D。
第二个是图形的id。这个id可以随便叫什么，但是要注意，当一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
<2> 加载数据：
需要设置数据文件的地址。如：
myChart.setDataURL("data.xml");
<3> 把图形渲染在指定的地方。
myChart.render("chartContainer");
"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartContainer"，即Flash图形就出现在这个id为"chartContainer"的DIV里。