Jquery实现FusionCharts遮罩效果，很不错

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

实现效果：下面是实现方法：数据源： Code [http://www.xueit.com] ? xml version="1.0" encoding="utf-8" ? chart caption ="月统计表" xAxisName ="月份" yAxisName ="值" showValues ="0" decimals ="0" formatNumberScale ="0"

实现效果：

下面是实现方法：

数据源：

Code [http://www.xueit.com]

<?xml version="1.0" encoding="utf-8" ?>
<chart caption="月统计表" xAxisName="月份" yAxisName="值" showValues="0" decimals="0" formatNumberScale="0" baseFont="Arial" baseFontSize="12">
  <set label="一月" value="462" link="JavaScript:ShowDrillChart('1, 235')" />
  <set label="二月" value="857" link="JavaScript:ShowDrillChart('2, 857')"/>
  <set label="三月" value="671" link="JavaScript:ShowDrillChart('3, 671')"/>
  <set label="四月" value="494" link="JavaScript:ShowDrillChart('4, 494')"/>
  <set label="五月" value="761" link="JavaScript:ShowDrillChart('5, 761')"/>
  <set label="六月" value="960" link="JavaScript:ShowDrillChart('6, 960')"/>
  <set label="七月" value="629" link="JavaScript:ShowDrillChart('7, 629')"/>
  <set label="八月" value="622" link="JavaScript:ShowDrillChart('8, 622')"/>
  <set label="九月" value="376" link="JavaScript:ShowDrillChart('9, 376')"/>
  <set label="十月" value="494" link="JavaScript:ShowDrillChart('10, 494')"/>
  <set label="十一月" value="761" link="JavaScript:ShowDrillChart('11, 761')"/>
  <set label="十二月" value="960" link="JavaScript:ShowDrillChart('12, 960')"/>
</chart>

前台实现：

Code [http://www.xueit.com]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FusionCharts_Jquery打造交换报表._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用FusionCharts显示报表</title>
    <!--数据编码-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--引入FusionCharts的JS文件-->
    <script type="text/javascript" src="JSClass/FusionCharts.js" ></script>
    <script type="text/javascript" src="JSClass/jquery-1[1].3.2-vsdoc2.js"></script>
    <!--引用Jquery插件，实现遮罩--->
    <script type="text/javascript" src="JSClass/jquery.blockUI.js"></script>
</head>
<body>
    <form id="form1" runat="server">
     <script type="text/javascript">
         function ShowReport(hei, wid, type, source) {
             //显示报表
             var chart = null;
             if (type == "Pie") {
                 var chart = new FusionCharts("Charts/Pie3D.swf", "ChartId", wid, hei, "0", "0");
             }
             else if (type == "Column") {
                 chart = new FusionCharts("Charts/Column3D.swf", "ChartId", wid, hei, "0", "1");
             }
             else if (type == "Line") {
                 chart = new FusionCharts("Charts/Line.swf", "ChartId", wid, hei, "0", "0");
             }
             chart.addParam("wmode", "Opaque"); //设置报表参数，控制报表显示
             chart.setDataURL(source);
             chart.render("ReportDiv");
         }

         function ShowDrillChart(par) {
             //分割字符串，获取参数
             var pars = par.toString().split(",");
             var month = pars[0];
             var value = pars[1];
             //发送ajax请求，获取钻取数据，数据格式为json
             $.getJSON("Model/GetDrill.ashx", { ParMonth: month }, function(json) {
                 //呈现子报表数据层
                 //$("#DrillDiv").hide().show();
                 var html = '<table border="0"><tr><td style="height:56px"></td></tr></table>';
                 html  = '<table border="1" cellspacing="0" style="border-collapse: collapse;width:380px"><tr><th align="center">第一周</th><th  align="center">第二周</th><th  align="center">第三周</th><th  align="center">第四周</th></tr>';

                 //解析Json数据，呈现数据
                 $.each(json.DrillTable, function(i, item) {
                     html  = '<tr style="color:Blue;line-height:20px; height:20px; font-size:12px;float:right;">';
                     html  = "<td>"   item.First   "</td>";
                     html  = "<td>"   item.Second   "</td>";
                     html  = "<td>"   item.Third   "</td>";
                     html  = "<td>"   item.Fourth   "</td>";
                     html  = "</tr>";
                 })
                 html  = "</table>";
                 html  = '<input type="button" value="关闭" id="Close" onclick=Close(); />';
                 $("#DrillDiv").html(html);
                 //实现遮罩
                 $.blockUI({ message: $("#DrillDiv"), css: { width: "430px", height: "300px"} });
             });
         }

         function Close() {
            // 取消遮罩
             $.unblockUI();
             $("#DrillDiv").hide();
         }

         $(document).ready(function() {
             $("#DrillDiv").hide();
         });
    </script>
    <div id="ReportDiv" style="float:left;">    
    </div>
    
   <div id="DrillDiv" style="display: none; cursor: default; width: 230px; height: 72px;padding-top:2px;">        
   </div>
    </form>
</body>
</html>

上一篇：C#递归实现汉诺塔(Hanoi) 游戏解法
下一篇：实现ASP.NET动态输出透明gif图片的方法

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

精彩文章

热点文章

Jquery实现FusionCharts遮罩效果，很不错

热门标签

赞助商链接