1、利用XML提供数据源
column2D.xml:
<?xml version="1.0" encoding="UTF-8"?>
<chart palette="2" caption="月收入统计(XML)" xAxisName="月份" yAxisName="收入" showValues="1" decimals="0" formatNumberScale="0" baseFontSize="12">
<set label="1月" value="4620" />
<set label="2月" value="8570" />
<set label="3月" value="6710" />
<set label="4月" value="4940" />
<set label="5月" value="7610" />
<set label="6月" value="9600" />
<set label="7月" value="6290" />
<set label="8月" value="6220" />
<set label="9月" value="7888" />
<set label="10月" value="4940" />
<set label="11月" value="7610" />
<set label="12月" value="9600" />
</chart>
2、利用随机数提供数据源
var strXML = "<chart palette='2' caption='月收入统计(随机数)' xAxisName='月份' yAxisName='收入' showValues='1' decimals='0' formatNumberScale='0' baseFontSize='12'>";
var i; //循环次数
for(i=1;i<=12;i++){
strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
}
strXML = strXML + "</chart>"
3、页面JSP
column2D.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionChart柱状图(2D)</title>
<script type="text/javascript" src="../Scripts/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../Scripts/JS/FusionCharts.js"></script>
<style type="text/css">
body,table{
100%;
height: 100%;
font-size: 12px;
}
</style>
<script type="text/javascript">
$(function(){
//利用XML提供的静态数据来作为数据源
var column2D = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2DId", "96%", "300", "0", "1" );
column2D.setXMLUrl("xml/column2D.xml");
column2D.render("column2D1");
//利用随机数提供的数据来作为数据源
var column2D2 = new FusionCharts( "../Scripts/FusionChart/Column2D.swf", "column2D2Id", "96%", "300", "0", "1" );
var strXML = "<chart palette='2' caption='月收入统计(随机数)' xAxisName='月份' yAxisName='收入' showValues='1' decimals='0' formatNumberScale='0' baseFontSize='12'>";
var i; //循环次数
for(i=1;i<=12;i++){
strXML += "<set label ='" + i +"月' value = '" + (Math.random()*1000 + 5000) + "'/>";
}
strXML = strXML + "</chart>"
column2D2.setXMLData(strXML);
column2D2.render("column2D2");
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="column2D1"></div>
</td>
</tr>
<tr>
<td>
<div id="column2D2"></div>
</td>
</tr>
</table>
</body>
</html>
4、运行结果
(1)初始化
(2)第一次刷新
(3)第二次刷新