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'