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


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

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

  下面就是JSChart.html的代码。

 

 

 

 

<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,html,c,div,图形)