巧用JSP+WEB组件实现KPI动态组件展示

帆软-Royide

一、故事背景

最近很多同学们在用FineBI搭建驾驶舱或者大屏看板的时候，尽管产品有内置了仪表盘组件可以用于进行数据指标统计，但是很多情况下还是希望数据能够直接以数字的形式进行统计呈现（内置虽然有文本组件但是只能呈现静态输入的文本文字，无法随着数据库中的数据变化而变化），那么这时会不会经常苦于FineBI V4.1中没有内置的KPI数值展示组件呢？提产品需求？这边官方告诉大家5.0版本会在产品中直接增加KPI组件，那么FineBI V4.1版本有没有什么好的办法可以实现呢？最近来问我这个问题的同学很多很多~那么下面就直接看我这边给大家分享的JSP+WEB组件实现KPI动态组件展示方案吧！

二、具体方案

1.记事本新建一个jsp（其实js也可以实现类似效果，为什么用jsp不用js呢？因为js代码前端可以直接查看，可能导致数据库安全隐患），命名为kpi.jsp，通过调用工程下面的数据库驱动jar，执行指标统计SQL，用于取出想要统计的指标数据，内容如下：

<%@ page contentType="text/html; charset=utf8" language="Java" import="java.sql.*,java.io.*,java.math.BigDecimal,java.text.DecimalFormat" errorPage="" %>
<!DOCTYPE html>
<html>
<head>
<title>巧用JSP+WEB组件实现KPI动态组件展示</title>
</head>
<body>
<script>
</script>
<%
String dri="org.h2.Driver"; //驱动名称，可根据实际情况修改
String url="jdbc:h2://G:/FineBI_4.1/webapps/WebReport/test"; //数据库URL，可根据实际情况修改
String user="sa"; //用户名，可根据实际情况修改
String password=""; //密码，可根据实际情况修改
String sql="select sum(总金额) from demo_contract"; //指标统计SQL，可根据实际统计指标进行修改
DecimalFormat df = new DecimalFormat("###,###,###"); //指标格式化代码，此处用于给数值加千分符，如果不需要可以注释掉
Connection conn = null; //数据库连接对象
Class.forName(dri).newInstance(); //加载驱动类
int rows=0; //定义行变量
conn = DriverManager.getConnection(url,user,password); //取得数据库连接
//out.println("连接成功！");
Statement stmt=conn.createStatement(); //创建数据库操作对象
ResultSet rs=stmt.executeQuery(sql); //执行SQL
ResultSetMetaData rsmd = rs.getMetaData(); //返回SQL数据集
rows = rsmd.getColumnCount(); //得到当前的行数
while(rs.next()) //遍历每列SQL数据集
{//输出显示
int temp=1;
for(;temp<=rows;temp++) //遍历每行SQL数据集
{
out.println("<font size=20 color=Yellow font-weight=bold>"+"￥"+df.format(rs.getDouble(temp))+"</font>"); //以html形式输出SQL统计结果，其中size表示字体大小，color表示字体颜色，font-weigh可设置字体加粗，df.format()函数可用于给返回的指标添加千分位分隔符，不需要可以去掉，直接展示rs.getDouble(temp)数据
}
}
%>
</body>
</html>