文檔半島外圍網(wǎng)上直營>>Flash圖表控件 FusionCharts 使用教程>>JS圖表控件FusionCharts使用教程：使用JavaScript更新圖表數(shù)據(jù)
JS圖表控件FusionCharts使用教程：使用JavaScript更新圖表數(shù)據(jù)
在使用FusionCharts的時候，用戶可以先創(chuàng)建一個簡單的圖表,然后改變它的數(shù)據(jù)(請參見下面的代碼)。圖表最初據(jù)顯示8月份的銷售數(shù)據(jù),當用戶點擊按鈕時改為顯示9月份的銷售數(shù)據(jù)。每個月都有單獨的XML文件,代碼如下:
<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月的數(shù)據(jù)創(chuàng)建了一個圖表,數(shù)據(jù)存在于AugustData.xml文件中。然后創(chuàng)建了一個HTML按鈕,用于調用一個JavaScript函數(shù)chageMonth()。 在這個函數(shù)有:
- 使用FusionCharts(“myChartId”)追蹤圖表
- 使用setXMLData()函數(shù)更新圖表
- 傳遞包含9月份數(shù)據(jù)的"SeptemberData.xml"文件到setXMLData()
最終圖表如下所示：
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線