2. 程式人生 > 實用技巧 >03全國疫情統計視覺化地圖-補

03全國疫情統計視覺化地圖-補

阿新 • • 發佈：2020-07-18

當時做這個的時候沒想太多，是自己根據資料算長度畫的柱狀圖，然後就比較難看，而且輸出資料因為採用的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="width: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="width: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;width:"+(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之類的，而是自己通過程式碼實現柱狀圖。說實話，很醜，而且效率低下，一般工程裡沒人會這麼用。而且也正是因為沒想到用現有工具類，後面階段的全國地圖不知道該怎麼展開。

相關推薦

03全國疫情統計視覺化地圖-補

當時做這個的時候沒想太多，是自己根據資料算長度畫的柱狀圖，然後就比較難看，而且輸出資料因為採用的Stack儲存，需要在最開始額外壓入最大長度，否則前端頁面接收後又得全部儲存一遍。

利用pyecharts讀取csv並進行資料統計視覺化的實現

因為需要一個html形式的資料統計介面，所以做了一個基於pyecharts包的視覺化程式，當然matplotlib還是常用的資料視覺化包，只不過各有優劣；基本功能概述就是讀取csv檔案資料，對每列進行資料統計並可視化，最後形成

Thingsboard 3.1 視覺化 -- 地圖部件及車聯網

先來一張圖，看看實現效果，Thingsboard3.1目前支援騰訊地圖、谷歌地圖、opensteet地圖、諾基亞here地圖、image 地圖，國內我們用不了谷歌，下面的示例使用騰訊地圖，前幾天在社群群裡有人問過騰訊地圖的定

python-pyecharts 疫情資料視覺化

畫圖程式碼檔案 draw_picture.py from pyecharts import options as opts from pyecharts.charts import Map, Page

“知疫”疫情資料視覺化平臺——Beta釋出說明

“知疫”疫情資料視覺化平臺——Beta釋出說明 一、前言 經過團隊的開發，“知疫”疫情資料視覺化平臺Beta版本終於趨於完善。在Beta版本中，我們根據前一階段的使用者反饋做了很多的更改。同時更令人激動的是，我們終

如何更新seaborn庫_百川歸海，四類圖統攬統計圖:Seaborn|視覺化系列03

技術標籤：如何更新seaborn庫 本文內容框架 Seaborn簡介 Matplotlib雖然提供了豐富而強大的介面用於資料的視覺化，但在展現多類資料關係時，需要較多資料處理過程，語句就變得繁瑣，因此seaborn針對這類需求，

Java爬蟲+Mysql+Echarts實現全國疫情資料實時視覺化

前言： 源於需要四天實現的Java課設，之前完全沒有學過Java，實現起來非常多的問題（痛苦面具）。Java爬蟲到伺服器的Mysql資料庫組員實現，從一個方法類將Mysql資料庫的資料返回了一個JSON資料，html網頁也有

python使用pyecharts庫畫地圖資料視覺化的實現

python使用pyecharts庫畫地圖資料視覺化導庫中國地圖程式碼結果世界地圖程式碼結果省級地圖程式碼結果地級市地圖程式碼結果

python實現3D地圖視覺化

基於python程式碼的3D地圖視覺化，供大家參考，具體內容如下 介紹 使用Python對地圖進行3D視覺化。以地圖為地圖，可以在三維空間對軌跡、點進行視覺化。

使用ajax實現疫情視覺化

上學期由於種種原因這個專案完成的不是很好，假期重新做一個，用了一上午時間做出來，雖然還是有點粗糙，但相對於之前，進步還是有的。

Python輕鬆實現地圖視覺化（轉載）

本文文字和圖片來源於網路，僅供交流學習使用。轉載於此，只為了做個筆記防止遺忘，如有侵權，敬請聯絡。

GPS資料在高德地圖上的視覺化

import pandas as pd import numpy as np import matplotlib.pyplot as plt import os import folium from folium import plugins

爬取上市公司資料、分析資料，並用視覺化現實全國各地區公司數量

前言 在很多網站上，都會以表格的形式展示資料，而我們獲取這種資料只需通過十幾行爬蟲程式碼就可以搞定，輕鬆搞定網頁爬蟲，實現高效辦公

Python資料視覺化：cartopy包——氣象實用地圖

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯絡我們以作處理。

Python資料視覺化：3D動態圖，讓你的足跡實現在地圖上

本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯絡我們以作處理。

（在模仿中精進資料視覺化03）OD資料的特殊視覺化方式

本文完整程式碼及資料已上傳至我的Github倉庫https://github.com/CNFeffery/FefferyViz 1 簡介

vue2.x 實現資料視覺化大屏（可互動氣泡地圖、數字滾動、表格滾動、列表輪播、餅圖輪播、圓環圖）

原文： 本人github文章 關注公眾號： 微信搜尋 web全棧進階 ; 收貨更多的乾貨 一、效果圖

使用python統計《三國演義》小說里人物出現次數前十名，並實現視覺化。

一、安裝所需要的第三方庫 jieba （jieba是優秀的中文分詞第三分庫） pyecharts （一個優秀的資料視覺化庫）

（在模仿中精進資料視覺化05）疫情期間市值增長top25公司

本文完整程式碼及資料已上傳至我的Github倉庫https://github.com/CNFeffery/FefferyViz 1 簡介

python-地圖視覺化元件folium的操作

folium是python的一個用來繪製地圖，並在地圖上打點，畫圈，做顏色標記的工具類。簡單易學，和pandas可以很好的融合，是居家必備良品。