FusionCharts 案例

最新推荐文章于 2018-03-05 15:35:37 发布

Peng4Wang1

最新推荐文章于 2018-03-05 15:35:37 发布

阅读量640

点赞数

文章标签：图形 javascript 报表 swf

本文链接：https://blog.csdn.net/wangpengblog/article/details/40620221

版权

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>

运用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'

Peng4Wang1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts 案例

第一步：引入FusionCharts.js文件，第二步：定义一个div,它必须具备一个元素：id 第三步：定义一个FusionCharts对象 var chart = new FusionCahrts(param1,param2,param3,param4) param1 swf的路径 param2 定义一个id是不重名的swf名称 param3 高度 param
复制链接

扫一扫