zoukankan html css js c++ java

03全国疫情统计可视化地图-补

当时做这个的时候没想太多，是自己根据数据算长度画的柱状图，然后就比较难看，而且输出数据因为采用的Stack存储，需要在最开始额外压入最大长度，否则前端页面接收后又得全部存储一遍。

package konoha.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Stack;

import konoha.etc.Rtn;
import konoha.util.DBUtil;

public class UniverDao {
    public static Stack<Rtn> getLogByDate(String date1, String date2) {
        Stack<Rtn> rtn = new Stack<Rtn>();
        Rtn tmp = null;
        int max = 0;
        String sql = "select * from info1 where date between '" + date1 + " 00:00:00' and '" + date2 + " 23:59:59'";
        Connection conn = DBUtil.getConn();
        Statement state = null;
        ResultSet rs = null;
        try {
            state = conn.createStatement();
            rs = state.executeQuery(sql);
            while (rs.next()) {
                tmp = new Rtn(rs.getString("Date"), rs.getString("Province"), rs.getString("City"),
                        rs.getString("Confirmed_num"), rs.getString("Cured_num"), rs.getString("Dead_num"));
                if (Integer.parseInt(rs.getString("Confirmed_num")) > max) {
                    max = Integer.parseInt(rs.getString("Confirmed_num"));
                }
                rtn.push(tmp);
            }
            tmp = new Rtn(Integer.toString(max), null, null, null, null, null);
            rtn.push(tmp);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBUtil.close(rs, state, conn);
        }
        return rtn;
    }
}

package konoha.etc;

public class Rtn {
    public String date = new String();
    public String prov = new String();
    public String city = new String();
    public String con = new String();
    public String cur = new String();
    public String dea = new String();

    public Rtn(String i1, String i2, String i3, String i4, String i5, String i6) {
        date = i1;
        prov = i2;
        city = i3;
        con = i4;
        cur = i5;
        dea = i6;
    }
}

package konoha.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import konoha.dao.UniverDao;

/**
 * Servlet implementation class LSL
 */
@WebServlet("/LSL")
public class LSL extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        request.setAttribute("Lrtn",
                UniverDao.getLogByDate(request.getParameter("day1"), request.getParameter("day2")));
        request.getRequestDispatcher("lRtn.jsp").forward(request, response);
    }

}

package konoha.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import konoha.dao.UniverDao;

/**
 * Servlet implementation class ZSL
 */
@WebServlet("/ZSL")
public class ZSL extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        request.setAttribute("Zrtn",
                UniverDao.getLogByDate(request.getParameter("zday1"), request.getParameter("zday1")));
        request.getRequestDispatcher("zRtn.jsp").forward(request, response);
    }

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
iframe{
    border:0px;
    margin:0px;
    padding:0px;
    width:100%;
}
</style>
<body>
<div align="center" style="100%;">
柱状图:
<select id="zYY"><option value="2020">2020</option></select>年
<select id="zMM" onchange="dCon('zMM','zDD');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="zDD"><option value='01'>1</option><option value='02'>2</option><option value='03'>3</option>
<option value='04'>4</option><option value='05'>5</option><option value='06'>6</option>
<option value='07'>7</option><option value='08'>8</option><option value='09'>9</option>
<option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>
<option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>
<option value='16'>16</option><option value='17'>17</option><option value='18'>18</option>
<option value='19'>19</option><option value='20'>20</option><option value='21'>21</option>
<option value='22'>22</option><option value='23'>23</option><option value='24'>24</option>
<option value='25'>25</option><option value='26'>26</option><option value='27'>27</option>
<option value='28'>28</option><option value='29'>29</option><option value='30'>30</option>
<option value='31'>31</option></select>日
<input type="button" value="查询柱状图" onclick="zCon();" />
</div>
<iframe id="zC" src="ZSL?zday1=2020-01-01" height="1100" width="1800"></iframe>
<div align="center" style="100%;">从
<select id="lYY"><option value="2020">2020</option></select>年
<select id="lMM" onchange="dCon('lMM','lDD');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="lDD"><option value='01'>1</option><option value='02'>2</option><option value='03'>3</option>
<option value='04'>4</option><option value='05'>5</option><option value='06'>6</option>
<option value='07'>7</option><option value='08'>8</option><option value='09'>9</option>
<option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>
<option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>
<option value='16'>16</option><option value='17'>17</option><option value='18'>18</option>
<option value='19'>19</option><option value='20'>20</option><option value='21'>21</option>
<option value='22'>22</option><option value='23'>23</option><option value='24'>24</option>
<option value='25'>25</option><option value='26'>26</option><option value='27'>27</option>
<option value='28'>28</option><option value='29'>29</option><option value='30'>30</option>
<option value='31'>31</option></select>日&nbsp;到&nbsp;
<select id="l2YY"><option value="2020">2020</option></select>年
<select id="l2MM" onchange="dCon('l2MM','l2DD');"><option value="01">1</option><option value="02">2</option><option value="03">3</option>
<option value="04">4</option><option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option><option value="09">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option></select>月
<select id="l2DD"><option value='01'>1</option><option value='02'>2</option><option value='03'>3</option>
<option value='04'>4</option><option value='05'>5</option><option value='06'>6</option>
<option value='07'>7</option><option value='08'>8</option><option value='09'>9</option>
<option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>
<option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>
<option value='16'>16</option><option value='17'>17</option><option value='18'>18</option>
<option value='19'>19</option><option value='20'>20</option><option value='21'>21</option>
<option value='22'>22</option><option value='23'>23</option><option value='24'>24</option>
<option value='25'>25</option><option value='26'>26</option><option value='27'>27</option>
<option value='28'>28</option><option value='29'>29</option><option value='30'>30</option>
<option value='31'>31</option></select>日
<input type="button" value="查询清单" onclick="lCon();" />
</div>
<iframe id="lC" src="LSL?day1=2020-01-01&day2=2020-01-01" height="500" width="1800"></iframe>
</body>
<script>
function zCon(){
    document.getElementById("zC").setAttribute("src","ZSL?zday1="+document.getElementById("zYY").value+"-"+
            document.getElementById("zMM").value+"-"+document.getElementById("zDD").value);
}
function lCon(){
    document.getElementById("lC").setAttribute("src","LSL?day1="+document.getElementById("lYY").value+"-"+document.getElementById("lMM").value+"-"+document.getElementById("lDD").value
            +"&day2="+document.getElementById("l2YY").value+"-"+document.getElementById("l2MM").value+"-"+document.getElementById("l2DD").value
    );
}
function dCon(mName,dName){
    var mon = document.getElementById(mName).value;
    var cor="<option value='01'>1</option><option value='02'>2</option><option value='03'>3</option><option value='04'>4</option><option value='05'>5</option><option value='06'>6</option><option value='07'>7</option><option value='08'>8</option><option value='09'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option>";
    if(mon=='01'||mon=='03'||mon=='05'||mon=='07'||mon=='08'||mon=='10'||mon=='12'){
        cor=cor+"<option value='29'>29</option><option value='30'>30</option><option value='31'>31</option>";
    }else if(mon=='02'){
        cor=cor+"<option value='29'>29</option>";
    }else{
        cor=cor+"<option value='29'>29</option><option value='30'>30</option>";
    }
    document.getElementById(dName).innerHTML=cor;
}
</script>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="konoha.etc.Rtn" import="java.util.Stack"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center" style="background-color:#f0f0f0;">
<table id="Table0">
<tr>
    <th>日期</th><th>省份</th><th>城市</th><th>确诊</th><th>治愈</th><th>死亡</th>
</tr>
<tr>
<td colspan='6'><hr /></td>
</tr>
<%
if(request.getAttribute("Lrtn")!=null){
    Stack<Rtn> res=(Stack<Rtn>)request.getAttribute("Lrtn");
    res.pop();
    while(!res.empty()){
        Rtn tmp = null;
        tmp = res.pop();
        if(!tmp.city.equals("")){
            out.print("<tr><td>"+tmp.date+"</td>"+"<td>"+tmp.prov+"</td>"+"<td>"+tmp.city+"</td>"+"<td>"+tmp.con+"</td>"+"<td>"+tmp.cur+"</td>"+"<td>"+tmp.dea+"</td></tr>");
        }
    }%>
    <%
    out.print("<tr><td colspan='6' align='center'><hr /></td></tr>");
}else{
    out.print("<td colspan='6' align='center' style='color:red;'>发生未知错误</td>");
}
%>
</table>
</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="konoha.etc.Rtn" import="java.util.Stack"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="left">
<table id="Table0">
<tr><td colspan='2'><hr /></td></tr>
<%
if(request.getAttribute("Zrtn")!=null){
    Stack<Rtn> res=(Stack<Rtn>)request.getAttribute("Zrtn");
    Rtn tmp = null;
    int max = 0;
    tmp = res.pop();
    if(Integer.parseInt(tmp.date)==0){
        out.print("<tr><td colspan='2'>嗯...库里没有这天的数据...</td></tr>");
    }else{
        max=Integer.parseInt(tmp.date);
        while(!res.empty()){
            tmp = res.pop();
            if(tmp.city.equals("")){
                out.print("<tr><td>"+tmp.prov+"(确诊"+tmp.con+"人)</td>"+"<td><div style='background-color:red;height:10px;"+(Integer.parseInt(tmp.con)*1500/max)+"px;'></div></td></tr>");
            }
        }
    }
    out.print("<tr><td colspan='2' align='center'><hr /></td></tr>");
}else{
    out.print("<td colspan='2' align='center' style='color:red;'>发生未知错误</td>");
}
%>
</table>
</div>
</body>
</html>

这次因为一些原因，没考虑到用echarts之类的，而是自己通过代码实现柱状图。说实话，很丑，而且效率低下，一般工程里没人会这么用。而且也正是因为没想到用现有工具类，后面阶段的全国地图不知道该怎么展开。

查看全文

相关阅读:
Springboot 之自定义配置文件及读取配置文件
 SQLSERVER系统视图 sql server系统表详细说明
 MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义
 使用Ecplise git commit时出现"There are no stages files"
maven添加sqlserver的jdbc驱动包
 java将XML文档转换成json格式数据
 java将XML文档转换成json格式数据
 cannot be resolved. It is indirectly referenced from required .class files
org.codehaus.jackson.map.JsonMappingException: Can not construct instance of java.util.Date from String value '2012-12-12 12:01:01': not a valid representation (error: Can not parse date "2012-12-
@Autowired注解和静态方法 NoClassDefFoundError could not initialize class 静态类

原文地址：https://www.cnblogs.com/minadukirinno/p/13337232.html