手把手教你创建第一个fusioncharts

来源：互联网发布：js unicode转utf8 编辑：程序博客网时间：2024/06/10 04:57

最近leader让学习fusioncharts相关内容，我花了一下午的时间学习了相关知识，并且用vs绘制了一副图表，把心得记录下来，仅供像我一样的新手学习，勿喷，大牛绕道。用了两种方法，一种是将xml或json数据直接嵌在javascript代码段中，另一种是将xml或json单独写成资源文件，在html中引用。这部分网上资料比较杂，而且因为fusioncharts版本更新导致前后用法不太一样，整理出正确完整的思路花了点时间。本文仅演示xml数据源的例子，json的自己把关键内容换一下就行，大差不差的。

一。easy模式，直接嵌入xml数据

1.首先到官网上下载fusioncharts的文件包 http://www.fusioncharts.com/

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里。

0 0