手把手教你创建第一个fusioncharts

最新推荐文章于 2021-05-14 01:35:06 发布

missyr

最新推荐文章于 2021-05-14 01:35:06 发布

阅读量273

点赞数

分类专栏： FusionCharts

本文链接：https://blog.csdn.net/qingtian12138/article/details/70750348

版权

FusionCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近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
    <script type="text/javascript" src="fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts.theme.fint.js"></script>
    <script type="text/javascript">
FusionCharts.ready(function () {
    var myChart = new FusionCharts({
      "type": "column2d",
      "renderAt": "chartContainer",
      "width": "500",
      "height": "300",
      "dataFormat": "xml",
      "dataSource": "
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   "
    });

  myChart.render();
});
    </script>


    
   
   
    
    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
    <script type="text/javascript" src="js/fusioncharts.js"></script>
    <script type="text/javascript" src="js/fusioncharts.theme.fint.js"></script>
    <script type="text/javascript">
FusionCharts.ready(function () {
    var myChart2 = new FusionCharts("Column3D", "myChartId2", "600", "300");
    myChart2.setDataURL("data.xml");
    myChart2.render("chartContainer");

  myChart.render();
});
    </script>


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

missyr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手把手教你创建第一个fusioncharts

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

扫一扫

专栏目录