使用FusionCharts建立可更新數據的JavaScript圖表

時間 2019-12-06

標籤使用 fusioncharts 建立可更新數據 javascript 圖表欄目 JavaScript 简体版

原文原文鏈接

先建立一個簡單的圖表,而後改變它的數據(請參見下面的代碼)。圖表最初據顯示8月份的銷售數據,當用戶點擊按鈕時改成顯示9月份的銷售數據。每月都有單獨的XML文件,代碼以下: javascript

<html>
  <head>
    <title>Update Chart data</title>
    <script type="text/javascript" src="../../FusionCharts/FusionCharts.js">
    </script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts will load here!</div>
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "../../FusionCharts/Column3D.swf", 
        "myChartId", "400", "300", "0", "1" );
      myChart.setXMLUrl("AugustData.xml");
      myChart.render("chartContainer");

        function changeMonth()
        {
            var chartReference = FusionCharts("myChartId");
            chartReference.setXMLUrl("SeptemberData.xml");
        }
    // -->
    </script>

    <input type="button" onClick="changeMonth();" value="Change Month">
  </body>
</html>

在上面的代碼中,咱們使用8月的數據建立了一個圖表,數據存在於AugustData.xml文件中。而後建立了一個HTML按鈕,用於調用一個JavaScript函數chageMonth()。在這個函數有: html

使用FusionCharts(「myChartId」)追蹤圖表 java

使用setXMLData()函數更新圖表函數

傳遞包含9月份數據的"SeptemberData.xml"文件到setXMLData() code

最終圖表以下所示： xml