java程序運用表單報表的FusionCharts案例分析
<html>
<head>
<%--
第一步:引入FusionCharts.js文件,
第二步:定義一個div,它必須具備一個元素:id
第三步:定義一個FusionCharts對象
var chart = new FusionCahrts(param1,param2,param3,param4)
param1 swf的路徑
param2 定義一個id是不重名的swf名稱
param3 高度
param4 寬度
第四步:設置數據文件
第五步:指定圖形渲染位置
char.render("chartId_01");
--%>
</head>
<script type="text/javascript" src="/FusionCharts/Charts/FusionCharts.js"></script>
<script type="text/javascript">
window.onload = function (){
var charts= new FusionCharts("/FusionCharts/Charts/Column3D.swf","swfId",600,500);
charts.setDataURL("/FusionCharts/datas/Data1.xml");
charts.render("chartId_01");
}
</script>
<body bgcolor="#ffffff">
<div id="chartId_01"></div>
</body>
</html>
<chart baseFont='SunSim' baseFontSize='12' subcaption='' yAxisMinValue='0' yAxisMaxValue='100000'
hovercapbg='ffecaa' hovercapborder='f47e00' formatNumberScale='1' decimalPrecision='2' showNames='1' showValues='1' rotateNames='1' numdivlines='10' numVdivlines='10'
xAxisName='月份' yAxisName='銷售個數' caption='2014年年度銷售情況統計分析'
useRoundEdges='1' bgColor='ffffff,ffffff' showBorder='5'>
<set name='一月' value='25000'/>
<set name='二月' value='25000'/>
<set label='三月' value='42300'/>
<set label='四月' value='35300'/>
<set label='五月' value='31300'/>
<set label='六月' value='25000'/>
<set label='七月' value='35000'/>
<set label='八月' value='42300'/>
<set label='九月' value='35300'/>
<set label='10月' value='31300'/>
<set label='11月' value='25000'/>
<set label='12月' value='35000'/>
</chart>
運用FusionCharts插件的幾個步驟:
第一步:引入FusionCharts.js文件,
第二步:定義一個div,它必須具備一個元素:id(swf所顯示的位置)
第三步:定義一個FusionCharts對象
var chart = new FusionCahrts(param1,param2,param3,param4)
param1 swf的路徑
param2 定義一個id是不重名的swf名稱
param3 寬度
param4 高度
第四步:設置數據文件
第五步:指定圖形渲染位置
char.render("chartId_01");
Chart xml文件解釋
baseFont='SunSim' 文字類型
baseFontSize='12' 文字大小
subcaption=' ' 子標題
yAxisMinValue='0' y軸最小值
yAxisMaxValue='100000' y軸最大值
hovercapbg='ffecaa' 鼠標停在位置的背景顏色
hovercapborder='f47e00' 鼠標所停位置的邊框顏色
formatNumberScale='1' 是否加單位k (千) 0表示沒有千單位 1 表示加k單位
decimalPrecision='2' 小數位數
showNames='1' 是否顯示x軸座標的名稱(1表示顯示,0表示不顯示)
showValues='1' 是否顯示每個x軸座標的值(1表示顯示,0表示不顯示)
rotateNames='1' 是否旋轉x軸的文字
numdivlines='10' x軸的網格數
numVdivlines='10' y軸的網格數
xAxisName='月份' x軸名稱
yAxisName='銷售個數' y軸名稱
caption='2014年年度銷售情況統計分析' 圖形的標題
useRoundEdges='1'
bgColor='ffffff,ffffff'
showBorder='5'