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

查看全文

相关阅读:
Django数据库相关之select_related/prefetch_related
Django 序列化
 Django 信号
 Django缓存配置和使用
 Django FBV/CBV、中间件、GIT使用
 学员管理系统(SQLAlchemy 实现)
Oracle的三种高可用集群方案
 linux系统安装硬盘分区建议
 Linux下expdp自动备份
 impdp导入报错ORA-39070：无法打开日志文件

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