全球疫情统计APP图表形式展示
全球疫情统计APP图表展示：
将该任务分解成三部分来逐个实现：
①爬取全球的疫情数据存储到云服务器的MySQL上
②在web项目里添加一个servlet，通过参数的传递得到对应的json数据
③设计AndroidAPP，通过时间和地名来访问服务器上的对应的servlet来获取json数据，然后将它与图表联系
第一步：由前面的web项目的积累，爬取全球的数据就很容易，利用Python爬虫爬取丁香医生上的数据，存储到服务器上的MySQL
from os import path
import requests
from bs4 import BeautifulSoup
import json
import pymysql
import numpy as np
import time url = 'https://ncov.dxy.cn/ncovh5/view/pneumonia?from=timeline&isappinstalled=0' #请求地址
headers = {'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36'}#创建头部信息
response = requests.get(url,headers = headers) #发送网络请求
#print(response.content.decode('utf-8'))#以字节流形式打印网页源码
content = response.content.decode('utf-8') soup = BeautifulSoup(content, 'html.parser')
listB = soup.find_all(name='script',attrs={"id":"getListByCountryTypeService2true"})
world_messages = str(listB)[95:-21]
world_messages_json = json.loads(world_messages)
# print(listB)
# print(world_messages)
worldList = []
for k in range(len(world_messages_json)):
worldvalue = (world_messages_json[k].get('id'),time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())),
world_messages_json[k].get('continents'),world_messages_json[k].get('provinceName'),
world_messages_json[k].get('cityName'),world_messages_json[k].get('currentConfirmedCount'),
world_messages_json[k].get('suspectedCount'),world_messages_json[k].get('curedCount'),world_messages_json[k].get('deadCount'),world_messages_json[k].get('locationId'),
world_messages_json[k].get('countryShortCode'),)
worldList.append(worldvalue)
db = pymysql.connect("139.129.221.11", "root", "fengge666", "yiqing", charset='utf8')
cursor = db.cursor()
#sql_clean_world = "TRUNCATE TABLE world_map"
sql_world = "INSERT INTO world_map values (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
worldTuple = tuple(worldList) #
# try:
# cursor.execute(sql_clean_world)
# db.commit()
# except:
# print('执行失败，进入回调1')
# db.rollback() try:
cursor.executemany(sql_world,worldTuple)
db.commit()
except:
print('执行失败，进入回调3')
db.rollback() db.close()
第二步：在之前的web项目里增加一个worldServlet来通过传递过来的参数（时间，地名）来获取服务器里数据库的信息，然后以json的数据格式返回。
package 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 com.google.gson.Gson; import Bean.World;
import Dao.predao; /**
* Servlet implementation class worldServlet
*/
@WebServlet("/worldServlet")
public class worldServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public worldServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
String date=request.getParameter("date");
String name=request.getParameter("name");
//System.out.println("666:"+date+" "+name);
predao dao=new predao();
World bean=dao.findworld(date,name);
//if(bean==null)
// System.out.println("world为空");
Gson gson = new Gson();
String json = gson.toJson(bean);
response.getWriter().write(json);
//System.out.println(json);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
第三步：Android端的设计，也要细分成两部分。第一部分设计界面的样式以及图表的展示，第二部分就是实现Android端访问远程服务器里的数据获取对应的信息，然后再配置到Android的图表里。
第一部分实现界面的设计，以及图表。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="时间"
android:textSize="25dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> <EditText
android:id="@+id/et_time"
android:layout_width="250dp"
android:layout_height="46dp"
android:layout_marginEnd="100dp"
android:layout_marginRight="100dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/tv_time" /> <TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="99dp"
android:paddingTop="110dp"
android:text="国家名"
android:textSize="25dp"
app:layout_constraintBottom_toTopOf="@+id/chartshow_wb"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> <EditText
android:id="@+id/et_name"
android:layout_width="250dp"
android:layout_height="60dp" android:gravity="center"
android:paddingLeft="120dp"
app:layout_constraintBottom_toBottomOf="@+id/bt_ly"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/bt_ly"
app:layout_constraintTop_toTopOf="@+id/tv_time" /> <LinearLayout
android:id="@+id/bt_ly"
android:layout_width="409dp"
android:layout_height="209dp"
android:layout_marginTop="16dp"
android:gravity="center_horizontal"
android:paddingTop="150dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"> <Button
android:id="@+id/linechart_bt"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="折线图" /> <Button
android:id="@+id/barchart_bt"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="柱状图" /> <Button
android:id="@+id/piechart_bt"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="饼状图" />
</LinearLayout> <WebView
android:id="@+id/chartshow_wb"
android:layout_width="408dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_name"> </WebView>
</androidx.constraintlayout.widget.ConstraintLayout>
界面有三部分组成：其一是时间选择框和地名选择，其二就是三个按钮（折线，柱状，圆饼），其三就是webview来展示我们的图表界面
图表的设计，首先要将echart.min.js放在AndroidStudio里的assets里，然后再放入自己的图表html代码，通过json数据来给图表进行赋值。同样在主页面对webview进行一堆设置，允许运行脚本，设置它的loadURL，然后设计三个按钮的点击方式，同时启动不同的脚本。
<!DOCTYPE html>
<!-- release v4.3.6, copyright 2014 - 2017 Kartik Visweswaran -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Android使用Echarts示例</title> </head> <body>
<div id="main" style="width: 100%; height: 350px;"></div>
<script src="./echarts.min.js"></script>
<script type="text/javascript">
window.addEventListener("resize",function(){
option.chart.resize();
});
//初始化路径
var myChart; // 通用属性定义
var options = {
title : {
text : "Echart测试"
},
tooltip : {
show : false
},
toolbox : {
show : false
},
}; function doCreatChart(type,jsondata){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
if(type=='line'||type=='bar')
{
// 指定图表的配置项和数据
options = {
title: {
text: '人数'
},
tooltip: {},
legend: {
data:['疫情状况']
},
xAxis: {
data: ["确诊","疑似","治愈","死亡"]
},
yAxis: {},
series: [{
name: '患者数',
type: type,
data: jsondata
}]
};
}else{
options = {
series : [
{
type:type,
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'确诊'},
{value:310, name:'疑似'},
{value:234, name:'治愈'},
{value:135, name:'死亡'}
]
}
]
};
} // 使用刚指定的配置项和数据显示图表。
myChart.setOption(options); }
</script>
</body> </html>
第二部分就是通过Android端的http访问来获取服务器端的json数据，在将该数据传到图表的数据格式里。
MainActivity
package com.example.yiqing; import android.app.Activity;
import android.app.DatePickerDialog;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText; import org.json.JSONObject; import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Calendar; public class MainActivity extends Activity implements View.OnClickListener {
private EditText meditText,etname;
private Button linechart_bt,barchart_bt,piechart_bt;
private WebView chartshow_wb;
private String name;
private String data;
private world bean;
private String[] url;
private String[] json = {new String()};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
bean=new world();
} private void getJson(final String address) { new Thread(new Runnable(){
@Override
public void run() {
HttpURLConnection connection = null;
try {
URL url = new URL(address);
Log.d("address",address);
connection=(HttpURLConnection) url.openConnection();
connection.setRequestMethod("GET");
connection.setConnectTimeout(10000);
connection.setReadTimeout(5000);
connection.connect();
int code=connection.getResponseCode();
if(code==200){
Log.i("accept:","链接成功");
InputStream is=connection.getInputStream();
String state = getStringFromInputStream(is);
JSONObject jsonObject = new JSONObject(state);
//String json=jsonObject.toString();
bean.setConfirmed(jsonObject.getString("confirmed"));
bean.setCured(jsonObject.getString("cured"));
bean.setDead(jsonObject.getString("dead"));
bean.setSuspected(jsonObject.getString("suspected"));
json[0] ="["+bean.getConfirmed()+","+bean.getSuspected()+","+bean.getCured()+","+bean.getDead()+"]";
//Log.i(etname.getText().toString(),json[0]);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
if(connection!=null){
connection.disconnect();
}
}
}
}).start();
} private static String getStringFromInputStream(InputStream is) throws Exception{ ByteArrayOutputStream baos=new ByteArrayOutputStream();
byte[] buff=new byte[1024];
int len=-1;
while((len=is.read(buff))!=-1){
baos.write(buff, 0, len);
}
is.close();
String html=baos.toString();
baos.close();
return html;
} /**
* 初始化页面元素
*/
private void initView(){
linechart_bt=(Button)findViewById(R.id.linechart_bt);
barchart_bt=(Button)findViewById(R.id.barchart_bt);
piechart_bt=(Button)findViewById(R.id.piechart_bt);
etname=(EditText) findViewById(R.id.et_name);
meditText=(EditText) findViewById(R.id.et_time); meditText.setOnClickListener(this);
linechart_bt.setOnClickListener(this);
barchart_bt.setOnClickListener(this);
piechart_bt.setOnClickListener(this);
chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);
//进行webwiev的一堆设置
//开启本地文件读取（默认为true，不设置也可以）
chartshow_wb.getSettings().setAllowFileAccess(true);
//开启脚本支持
chartshow_wb.getSettings().setJavaScriptEnabled(true);
chartshow_wb.loadUrl("file:///android_asset/echarts.html"); name=etname.getText().toString().trim();
data=meditText.getText().toString().trim();
} @Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.et_time:
Calendar calendar = Calendar.getInstance();
DatePickerDialog datePickerDialog=new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
if(month<10)
MainActivity.this.meditText.setText(year + "-" +"0"+(month+1) + "-" + dayOfMonth);
else
MainActivity.this.meditText.setText(year + "-" + (month+1) + "-" + dayOfMonth);
}
},calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH));
datePickerDialog.show();
break; case R.id.linechart_bt:
url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="};
url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString();
getJson(url[0]);
//Log.i("json:",json[0]);
//String json="["+bean.getConfirmed()+","+bean.getSuspected()+","+bean.getCured()+","+bean.getDead()+"]";
Log.i("jsonline:",json[0]);
chartshow_wb.loadUrl("javascript:doCreatChart('line',"+json[0]+");");
//Toast.makeText(MainActivity.this,"折线图",Toast.LENGTH_SHORT).show();
break;
case R.id.barchart_bt:
url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="};
url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString();
getJson(url[0]);
chartshow_wb.loadUrl("javascript:doCreatChart('bar',"+json[0]+");");
break;
case R.id.piechart_bt:
url = new String[]{"http://139.129.221.11/yiqing/worldServlet?date="};
url[0] = url[0] + meditText.getText().toString()+"&name="+etname.getText().toString();
getJson(url[0]);
chartshow_wb.loadUrl("javascript:doCreatChart('pie',"+json[0]+");");
break;
default:
break;
}
} }
制作中遇到的困难以及解决方案：
①远程数据库的连接无法访问，发现自己的服务器3306端口未开放同时要对服务器里的mysql里的一些东西进行配置：我参考的博客是-->远程连接数据库
②本来想的是进行jdbc访问远程数据库，奈何整了大半天硬是连不上，最终换了一种方式采取http访问服务器里的数据。
③安卓新版本默认不允许使用明文网络传输，
解决办法如下，在AndroidManifest.xml文件的<application标签中，加入一句"android:usesCleartextTraffic="true",允许应用进行明文传输即可。
或者采用：
更改 AndroidManifest 的 application 标签下的配置。
添加 networkSecurityConfig(网络安全配置)。
android:networkSecurityConfig="@xml/network_security_config"
network_security_config 文件内容如下：
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
全球疫情统计APP图表形式展示的更多相关文章
- 【JavaWeb+Echarts+EL表达式】用图表形式展示数据
1. Echarts环境配置 https://www.echartsjs.com/zh/download.html 选择需要的,然后等待Build完成之后,就会自动弹出下载框啦! 把下载好的js放在w ...
- 全球疫情爬取APP版
全球疫情统计APP图表展示: 将该任务分解成三部分来逐个实现: ①爬取全球的疫情数据存储到云服务器的MySQL上 ②在web项目里添加一个servlet,通过参数的传递得到对应的json数据 ③设计A ...
- 性能测试 CentOS下结合InfluxDB及Grafana图表实时展示JMeter相关性能数据
CentOS下结合InfluxDB及Grafana图表实时展示JMeter相关性能数据 by:授客 QQ:1033553122 实现功能 1 测试环境 1 环境搭建 2 1.安装influxdb ...
- 2.9 学习总结 之 【Android】体温统计APP
一.说在前面 昨天 学习了JQ的相关知识 今天 编写体温统计APP 我的工程源码:https://github.com/xiaotian12-call/Take-body-temperature 二. ...
- 用Python绘制全球疫情变化地图
目前全球疫情仍然比较严重,为了能清晰地看到疫情爆发以来至现在全球疫情的变化趋势,我绘制了一张疫情变化地图,完整代码共 230 行,需要的朋友在公众号回复关键字 疫情地图 即可. 废话不多说,先上图 下 ...
- Python 绘制全球疫情地图
国内疫情得到控制后,我就没怎么再关心过疫情,最近看到一条新闻,全球疫情累计确诊人数已经突破 500w 大关,看到这个数字我还是有点吃惊的. 思来想去,还是写一篇全球疫情的分析的文章,本文包括网络爬虫. ...
- 用python画出全球疫情趋势变化图
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:谦睿科技 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
- 【疫情动态条形图】用Python开发全球疫情排名动态条形图bar_chart_race
一.开发背景 你好,我是 @马哥python说 ,这是我用Python开发的全球疫情动态条形图,演示效果: https://www.zhihu.com/zvideo/15603276220259696 ...
- redis 一二事 - 设置过期时间，以文件夹形式展示key显示缓存数据
在使用redis时,有时回存在大量数据的时候,而且分类相同,ID相同 可以使用hset来设置,这样有一个大类和一个小分类和一个value组成 但是hset不能设置过期时间 过期时间只能在set上设置 ...
随机推荐
- maven中 pom.xml与properties等配置文件之间互相读取变量
问题由来: 最近公司的maven项目需要改进,希望把该项目依赖的一系列artifact放到properties文件中,这样做的目的是是为了很容易看到四月份release和七月份的release,它们所 ...
- Typescript - 类型断言
原文:TypeScript基本知识点整理 零.序言 类型断言,可以用来手动指定一个值的类型. 给我的感觉,和 java 中的强制类型转换很像. 常常和联合类型配合使用,如: // 错误示例 funct ...
- Jquery和js实现cookie操作手机浮层广告；附加：js获取、添加、删除cookie
1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...
- sql性能优化浅谈
sql性能优化总结: 最近随着数据越来越多,数据库性能问题暴露的越来越严重.几百万,上千万,甚至过亿的数据处理速度会非常的慢. 下面对工作中遇到的问题做下总结,希望以后能对日后的工作有所帮助. 不同的 ...
- 红灯区：DevOps 建设的思考和实践
点击关注"有赞coder" 获取更多技术干货哦- 作者:费解 团队:效能改进 背景 众所周知,在丰田精益生产中,核心观念包含对人的尊重.消除浪费.持续改善,只有这样,企业才能保持良 ...
- 数据分析交互工具jupyter notebook需要密码登陆解决办法
想要做数据分析,交互可视化工具jupyter notebook是必不可少的,但是在安装和使用其时候总是会出现各种各样的问题,本文针对notebook启动需要密码的问题进行解决. 首先看一下启动jupy ...
- 成为数据专家，你只差一个Quick Insights的距离
身处如今的大数据时代,你真的知道如何处理数据和分析数据吗?或许那些被你忽视的数据背后就暗藏着重要的商业灵感.并非人人都是数据专家,有时候你需要一些专业的软件来帮你处理数据.那么如何能快速.准确地从数据 ...
- 《AndroidStudio导入安卓源码-idegen》---可方便查看安卓源代码
idegen是Android源码中的一个模块,需要编译一下.生成一个jar包.然后再进行构建生成AndroidStudio配置相关文件. > 什么是idegen 要将Android系统源代码工程 ...
- Java并发ReentrantLock
ReentrantLock简介 可重入锁,作用是使线程安全.对比于sychronized,它能具有以下特点 减小资源锁的力度 更可控,减少发生死锁的概率 加锁.释放锁都是显示控制的 添加锁的作用时间来 ...
- 石油测井专题（六）MCM工艺在LWD的应用
在上一篇的MCM工艺我们提到过石英挠性加速度计的伺服电路采用此工艺可以有效提高仪器产品的稳定性和寿命. MCM相对于印制电路板(PCB)来讲,MCM技术采用了更短的连接长度和更紧密的器件布局,从而降低 ...