JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据
在使用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()。 在这个函数有:
- 使用FusionCharts(“myChartId”)追踪图表
- 使用setXMLData()函数更新图表
- 传递包含9月份数据的"SeptemberData.xml"文件到setXMLData()
最终图表如下所示：
相关推荐
xiaoge00 2019-10-30
huanglianhuabj00 2014-11-13
gufeijunchi 2014-11-13
Blovesea 2014-11-13
STPace 2014-11-10
shanhuijava 2015-12-25
二毛妮子 2015-01-20
xiaocaibai 2014-11-15
NONINETEEN 2014-11-13
shenjianxz 2014-11-13
JavaJspSsh 2014-11-13
mannoroth 2014-11-13
CoreyJia 2014-11-10
maple00 2013-09-06
linkincsdn 2013-08-29
MegatronKings 2013-01-26
ifconfig 2012-11-27
郭文睿 2011-03-03
sunset 2015-11-10