动态报表使用说明
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
本文章只对折线、柱状和饼形报表进行说明:
由于这几种报表只能利用XML文件进行配合使用,所以每个报表都将对应一个xml文件;如果要根据数据库中的数据动态生成报表时,可以根据C#程序动态配置xml文件或者AJAX 异步获取xml格式文本,这里例子就直接写死了。
1.柱形报表Column2D.swf
2.柱形报表3D效果对应文件Column3D.swf:
3.饼形对应文件.Pie2D.swf
4.饼形3D效果对应文件 .Pie3D.swf
实现步骤:
首先新建一个xml文件如data.xml文件里面配置节点如下:
decimalPrecision='0'formatNumberScale='0'> //decimalPrecision为小数点后面的位数formatNumberScale值为1格式化数字如3000自动转为3k,为0时不转换
参数说明:
所有参数内容包含在
encoding最好值为gb2312,否则里面的中文如“月份”可能在网页中出现乱码;Caption为报表名称,xAxisName对于横坐标的标注,yAxisName对于纵坐标的标注,showNames每个月份横坐标的标题的显示状态(0:隐藏、1:显示)
set中的name:每个图块的名字,value每个图块的位置值,color每个段的图块颜色;
然后新建一个html页面,拖入jquery和FusionCharts包
脚本写入如下代码:
$(function() {//页面初始化
$("#btn").click(function() {
var mychar = new FusionCharts("Charts/Column2D.swf", "tuid", "300", "200");//Column2D.swf文件的路径,唯一id标识可任写,报表宽度,高度
mychar.setDataURL("Data.xml");//上面已经配置好的xml文件路径 mychar.render("mydiv");//报表要放入的位置这里是一个层的id }); });
//异步获取xml格式文本
//使用ajax获取数据,不从xml文件中得到数据,使用setDataXML(返回的xml格式文本);
$.get(
"Handler1.ashx",
function(date) {
var mychar = new FusionCharts("Charts/Column2D.swf ", "tuid", "500", "300"); mychar.setDataXML(date);
mychar.render("handerDiv");
});
在Handler1.ashx文件中如下代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//设置xml文件字符串
//设置全局配置参数
string XMLstr = "
//配置详细数据
XMLstr += "
+"
+ "
+ "
+ "
+ "
+ "
+ "
+ "
+ "
+ "
+ "
XMLstr += "";
//响应流中
context.Response.Write(XMLstr);
}
折线图表
对于折线报表图和上面使用方法一样,唯一变化的就是swf文件和xml文件配置;