FusionCharts Free-使用JS載入-flash圖表

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用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地址這些地方發生了變化。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

FusionCharts Free-使用JS載入-flash圖表

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support