原創|使用教程|編輯:郝浩|2013-09-06 14:25:25.000|閱讀 1651 次
概述:使用FusionCharts的時候,用戶可以通過設置簡單的JavaScript代碼,用于更改圖表上的數據。先創建一個簡單的圖表,然后改變它的數據(請參見下面的代碼)。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在使用FusionCharts的時候,用戶可以先創建一個簡單的圖表,然后改變它的數據(請參見下面的代碼)。圖表最初據顯示8月份的銷售數據,當用戶點擊按鈕時改為顯示9月份的銷售數據。每個月都有單獨的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月的數據創建了一個圖表,數據存在于AugustData.xml文件中。然后創建了一個HTML按鈕,用于調用一個JavaScript函數chageMonth()。 在這個函數有:
最終圖表如下所示:


本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件網