您的位置：首页 > Web前端 > JavaScript

FusionCharts Free-使用JS加载-flash图表

2010-04-20 15:55 253 查看

使用JS加载

　　这个JS类文件就在FusionChartsFree>JSClass文件夹下，我们把它拷贝到c:FusionChartsFusionCharts下面。

　　现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，

　　下面就是JSChart.html的代码。（请发邮件到freeget.one@gmail.com获得翻强软件。）

<html>　　

　　　 <head>　　

　　　　　　　 <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>　　

　　　 </head>　　　　

<body bgcolor="#ffffff">　　

　　　 <div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>　　

　　　 <script type="text/javascript">　　

　　　　　　　 var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");　　　

　　　　　　　 myChart.setDataURL("Data.xml");　　　

　　　　　　　 myChart.render("chartdiv");　　　

　　　 </script>　　

</body>　　

</html>

　　我们对上面的代码进行以下解释。

　　首先，我们用下面的语句来加载FusionCharts.js文件。

<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>

然后，我们定义了一个DIV，它还有个id。

　　<div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>　

　　我们的图形就出现在这个DIV里。

　　接着，我们用四个参数建立了一个FusionCharts对象，

var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");

　　第一个参数是SWF文件的地址。

　　第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。

　　第三个参数是图形的宽。

　　第四个参数是图形的高。

　　我们还要设置数据文件的地址。

myChart.setDataURL("Data.xml");

　　最后，我们把图形渲染在指定的地方。

myChart.render("chartdiv");

　　"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。

　　现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。

　　多图形

　　有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。

　　怎么加载多个图形呢？很简单，看下面。

<html>　　

<head><title>多图形</title>　　　　

　　 <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>　　

</head>　　

<body bgcolor="#ffffff">　　

　　 <div id="chartdiv1" align="center">First Chart Container Pie 3D</div>　　

　　 <script type="text/javascript">　　

　　　　　　 var myChart1 = new FusionCharts("../FusionCharts/FCF_pie3D.swf", "myChartId1", "600", "400");　　　　

　　　　　　 myChart1.setDataURL("Data.xml");　　　　

　　　　　　 myChart1.render("chartdiv1");　　　

　　 </script>　　

　　

　 <div id="chartdiv2" align="center">Second Chart Container Column 3D</div>　　

　　 <script type="text/javascript">　　

　　　　　　 var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");　　　　

　　　　　　 myChart2.setDataURL("Data.xml");　　　　

　　　　　　 myChart2.render("chartdiv2");　　　

　　 </script>　　

　　

　 <div id="chartdiv3" align="center">Third Chart Container Line 2D</div>　　

　　 <script type="text/javascript">　　

　　　　　　 var myChart3 = new FusionCharts("../FusionCharts/FCF_line.swf", "myChartId3", "600", "300");　　　　

　　　　　　 myChart3.setDataURL("Data.xml");　　　　

　　　　　　 myChart3.render("chartdiv3");　　　

　　 </script>　　

　　

　 <div id="chartdiv4" align="center">Fourth Chart Container Area 2D</div>　　

　　 <script type="text/javascript">　　

　　　　　　 var myChart4 = new FusionCharts("../FusionCharts/FCF_area2D.swf", "myChartId4", "400", "250");　　　　

　　　　　　 myChart4.setDataURL("Data.xml");　　　　

　　　　　　 myChart4.render("chartdiv4");　　　

　　 </script>　　

</body>　　

</html>　　　

仔细对比上面的四个图形代码，其实就是div的id，FusionCharts对象的名称,图形的id，还有图形的SWF地址这些地方发生了变化。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图形 javascript div html c

相关文章推荐

新的分享

章节导航