使用antv展示爬虫数据

最新推荐文章于 2024-09-24 09:29:20 发布
最新推荐文章于 2024-09-24 09:29:20 发布
阅读量1.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws_0815/article/details/79017599
版权

今天我们组主要做的是在已经实现获取上万条数据之上，完成数据展示

1.折线统计图

（1）首先取出数据库的数据

public class TestServlet1 extends HttpServlet {


	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {


		doPost(request, response);
	}


	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {


		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		taste2num();
        out.write(taste2num());
		out.flush();
		out.close();
	}
	private String Map2G2EasyJson(Map<String,Integer> map,String valuex,String valuey){
		StringBuffer buffer = new StringBuffer();
		buffer.append("{\"data\":[");
		//map key
		for (String key : map.keySet()) {
			buffer.append("{\""+valuex+"\":\""+key+"\",");
			buffer.append("\""+valuey+"\":"+map.get(key)+"},");
		}
		buffer.delete(buffer.length()-1, buffer.length()).append("],");
		buffer.append("\"valuex\":\""+valuex+"\",");
		buffer.append("\"valuey\":\""+valuey+"\"}");
		return buffer.toString();
	}
	private String taste2num() {
		List<String> moneys = new ArrayList<String>();
		Map<String,Integer> tmap = new HashMap<String,Integer>();
		//获取数据
		Connection con = null;
		PreparedStatement sql_statement = null;
		ResultSet set = null;
		try {
			Class.forName("com.mysql.jdbc.Driver");
			 String mysqlurl = "jdbc:mysql://localhost:3306/user";
			String sql =  "select money from info"; 
			  String username = "root";
			  String password = "root";
			  con = DriverManager.getConnection(mysqlurl, username, password);
			 // System.out.println("数据库已连接");
			  sql_statement = con.prepareStatement(sql);
			  set = sql_statement.executeQuery();
			  
			  //循环遍历结果集，将取出的结果放到list容器中
			  while(set.next()){
				  
				  moneys.add(set.getString(1));
				  //System.out.println("--"+set);
				  
			  }
			  for (String money : moneys) {
				  
						 //System.out.println("moneyss="+moneyss.length);
						
						if(null!=money&&"null"!=money.trim()&& !money.contains("-")){
							
							int newmoney=Integer.parseInt(money.replace("人均:", "").replace("元", ""));
							//int newmoney1=Integer.parseInt(money.replace("人均:", ""));
							if(newmoney>=50&&newmoney<=60){ 
								tmap.put("人均在50-60之间",tmap.get("人均在50-60之间")+1);
						  }else if(newmoney>=60&&newmoney<=70){
							  tmap.put("人均在60-70之间",tmap.get("人均在60-70之间")+1);
							  
						  }else if(newmoney>=70&&newmoney<=80){
							  tmap.put("人均在70-80之间",tmap.get("人均在70-80之间")+1);
							  
						  }else if (newmoney>=80&&newmoney<=90) {
							  tmap.put("人均在80-90之间",tmap.get("人均在80-90之间")+1);
							
						}else if (newmoney>=90&&newmoney<=100) {
							tmap.put("人均在90-100之间",tmap.get("人均在90-100之间")+1);
						}else if(newmoney>=100){
							tmap.put("人均100以上",tmap.get("人均100以上")+1);
							
						}
							
					}
			}
			  
			  for (String string : tmap.keySet()) {
				System.out.println(string+" ： "+tmap.get(string));
			}
			  return Map2G2EasyJson(tmap,"人均","数量");	  
			  
			  //Statement
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				if(set!=null){
					set.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			try {
				if(sql_statement!=null){
					sql_statement.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			try {
				if(con!=null){
					con.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	
		return null;
	}
	 
	
}

（2）绘制条形统计图，建立html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础折线图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script src="js/jquery-1.11.1.min.js"></script>
<script>
  $.ajax({
	   type: "POST",//请求方式  
	   url: "echar1",//地址，就是action请求路径  
	   data: "",//数据类型text xml json  script  jsonp
	   dataType:"json",
	   success: function(msg){//返回的参数就是 action里面所有的有get和set方法的参数  
	      const chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(msg.data);
  chart.scale(msg.valuey, {
    min: 0
  });
  chart.scale(msg.valuex, {
    range: [ 0 , 1 ]
  });
  chart.tooltip({
    crosshairs: {
      type: 'line'
    }
  });
  chart.line().position(msg.valuex+"*"+msg.valuey);
  chart.point().position(msg.valuex+"*"+msg.valuey).size(4).shape('circle').style({
    stroke: '#fff',
    lineWidth: 1
  });
  chart.render();
  },error:function(msg)
	   {
		   console.info("error!!!");
		   console.info(msg);
	   }  
	});  
</script>
</body>
</html>
显示结果：


2.基础饼图

（1）取出数据库对应的信息

public class TestServlet2 extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		taste2num();
        out.write(taste2num());
		out.flush();
		out.close();
	}
	private String Map2G2EasyJson(Map<String,Integer> map,String valuex,String valuey){
		StringBuffer buffer = new StringBuffer();
		buffer.append("{\"data\":[");
		//map key
		for (String key : map.keySet()) {
			buffer.append("{\""+valuex+"\":\""+key+"\",");
			buffer.append("\""+valuey+"\":"+map.get(key)+"},");
		}
		buffer.delete(buffer.length()-1, buffer.length()).append("],");
		buffer.append("\"valuex\":\""+valuex+"\",");
		buffer.append("\"valuey\":\""+valuey+"\"}");
		return buffer.toString();
	}
	private String taste2num() {
		List<String> comments = new ArrayList<String>();
		Map<String,Integer> tmap = new HashMap<String,Integer>();
		//获取数据
		Connection con = null;
		PreparedStatement sql_statement = null;
		ResultSet set = null;
		try {
			Class.forName("com.mysql.jdbc.Driver");
			 String mysqlurl = "jdbc:mysql://localhost:3306/user";
			String sql =  "select comment from info"; 
			  String username = "root";
			  String password = "root";
			  con = DriverManager.getConnection(mysqlurl, username, password);
			 // System.out.println("数据库已连接");
			  sql_statement = con.prepareStatement(sql);
			  set = sql_statement.executeQuery();
			  //Vector<Object> list = convertList( set);
			  
			  //循环遍历结果集，将取出的结果放到list容器中
			  while(set.next()){
				  
				  comments.add(set.getString(1));
				  //System.out.println("--"+set);
				  
			  }
			  for (String comment : comments) {
						
						if(null!=comment&&"null"!=comment.trim()/*&& !comment.contains("-")*/){
							
							int newcomment=Integer.parseInt(comment.replace("条评论", ""));
							if(newcomment<100){ 
								tmap.put("100条以下评论",tmap.get("100条以下评论")+1);
						  }else if(newcomment>=100&&newcomment<=500){
							  tmap.put("100-500条评论",tmap.get("100-500条评论")+1);
							  
						  }else if(newcomment>=500&&newcomment<=1000){
							  tmap.put("500-1000条评论",tmap.get("500-1000条评论")+1);
							  
						  }else if (newcomment>=1000&&newcomment<=2000) {
							  tmap.put("1000-2000条评论",tmap.get("1000-2000条评论")+1);
							
						}else if (newcomment>=2000) {
							tmap.put("2000条以上评论",tmap.get("2000条以上评论")+1);
						}
							
					}
			}
			  
			  for (String string : tmap.keySet()) {
				 
				System.out.println(string+" ： "+tmap.get(string));
			}
			  return Map2G2EasyJson(tmap,"评论","数量");	  
			  
			  //Statement
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				if(set!=null){
					set.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			try {
				if(sql_statement!=null){
					sql_statement.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			try {
				if(con!=null){
					con.close();
				}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	
		return null;
	}
	 
	
}
（2）绘制饼图，建立html文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础饼图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.4-beta.2/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.3/data-set.min.js"></script>
<script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script src="js/jquery-1.11.1.min.js"></script>
<script>
$.ajax({
	   type: "POST",//请求方式  
	   url: "echar2",//地址，就是action请求路径  
	   data: "",//数据类型text xml json  script  jsonp
	   dataType:"json",
	   success: function(msg){
	   var valuex = msg.valuex;
  const { DataView } = DataSet;
 
  const dv = new DataView();
  dv.source(msg.data).transform({
    type: 'percent',
    field: msg.valuey,
    dimension: msg.valuex,
    as: 'percent'
  });
  const chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight,
  });
  chart.source(dv, {
    percent: {
      formatter: val => {
         val= parseFloat(val).toFixed(4);
        val = (val * 100) + '%';
        return val;
      }
    }
  });
  chart.coord('theta');
   
 
  chart.tooltip({
    showTitle: false,
    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
  });
  chart.intervalStack()
    .position('percent')
    .color(msg.valuex)
    .label('percent', {
      formatter: (val, item) => {
      console.info(item);
      console.info(valuex);
        return item.point.评论 + ': ' + val;
      }
    })
    .tooltip(msg.valuex+"*percent",(item,percent) => {
     percent= parseFloat(percent).toFixed(4);
      percent = percent * 100 + '%';
      
      return {
        name: item,
        value: percent
      };
    })
    .style({
      lineWidth: 1,
      stroke: '#fff'
    });
  chart.render();
  },error:function(msg)
	   {
		   console.info("error!!!");
		   console.info(msg);
	   }  
	});  
</script>
</body>
</html>
展示效果：







ws_0815
关注
Antv/G2 折线图 使用 DataSet 进行数据排序
且听风吟的博客
11-13 689
Antv/G2 折线图 使用 DataSet 进行数据排序
antv/x6 导出图片方法exportPNG
.伊泽瑞尔
10-26 2214
antv/x6 导出图片方法exportPNG
AntV Data-Set 使用指南
gitblog_00001的博客
09-24 517
AntV Data-Set 使用指南 data-set state driven all in one data process for data visualization. 项目地址: https://gitcode.com/...
数据集管理利器：@antv/data-set 开源项目推荐
gitblog_01092的博客
09-24 347
数据集管理利器：@antv/data-set 开源项目推荐 data-set state driven all in one data process for data visualization. 项目地址: https://g...
angular+G2 导入@antv/data-set报错
QiuHaoqian的博客
05-20 1936
说明： G2可视化组件可能或用到DataSet 生成数据 DataSet 的目标是为数据可视化场景提供状态驱动（state driven）的、丰富而强大的数据处理能力。 DataSet 入门见：https://g2.antv.vision/zh/docs/manual/dataset/overview 问题： 官网给出的使用教程如下： 可是在angular组件中引入data-set import DataSet from ‘@antv/data-set’; 会报错 报错： ERROR in src
electron-react-antd-antv-cli的sqlite3数据库集成版本.zip
01-04
4. **AntV**：AntV是阿里云的开源数据可视化库，基于G2，支持多种图表类型，可以轻松实现数据到图形的映射，帮助开发者构建出具有吸引力的数据展示应用。 5. **SQLite3**：SQLite3是一个嵌入式数据库，它无需单独的...
antv-g6-master_java_
09-29
【标题】"antv-g6-master_java_" 指向的是一个基于Java的开源图形库AntV ...开发者通过Java实现后端服务，利用AntV G6进行数据可视化，同时运用网络爬虫技术获取和解析网页内容，为用户提供高效的图书搜索和阅读体验。
数据分析系统.zip
08-23
对于每类数据，首先通过爬虫抓取回数据并存放到数据库表中，然后通过 SQL 查询或者 Pandas 进行数据分析，最后将分析得到的结果采用图表形式展示出来。图表采用 Antv G2 在前端生成，或者使用 Matplotlib 在服务端...
微信小程序数据可视化看板
05-20
4. 数据可视化：使用数据可视化工具（如 ECharts、AntV 等）对数据进行可视化处理，例如生成各种图表、仪表盘等。 5. 小程序接入：将可视化后的数据接入到微信小程序中，通过小程序的界面展示数据。 6. 数据更新与...
数据可视化知识点汇总
genggengbu2的博客
01-29 1426
数据可视化canvassvg项目矢量图svgCanvas与SVG的主要区别d3zrenderthreeAntvAntv--g2g6L7HighchartsEchart系列组件坐标系样式管理数据维度映射移动端自适应事件和行为拖拽自定义系列v-chartsvue-echarts canvas “画布”,像素的位图 编写canvas标签 添加默认宽高 <canvas id="canvas" width="800" height="800"></canvas> 获取到canvas
解决Module not found: Error: Can‘t resolve ‘@antv/data-set‘ in xxx
qq_39290941的博客
06-10 4617
解决antv-g2数据集问题
Angular学习笔记27：使用viser-ng报错：Cannot find module '@antv/data-set'解决办法
热门推荐
W先生
12-08 1万+
在使用viser-ng的时候，在画饼状图的时候，会遇到DataSet这个包，然后保存编译运行的时候会报错如下： ERROR in src/app/testbing/testbing.component.ts(1,26): error TS2307: Cannot find module '@antv/data-set'. 错误：Cannot find module '@antv/data-s...
mysql配置读写分离无效_antv G6 图表-思维导图 在vue中使用 - SegmentFault 思否
weixin_32778881的博客
01-19 193
读写分离好处是提高数据库的高可用，水平扩展性能：水平扩展数据库的负载能力。容错，高可用。数据备份。本机模拟两个数据库。分别为phpstudy以及centos安装的mysql。ip1(CENTOS)：192.168.92.128ip2:192.168.99.1准备用ip1作为master，ip2作为slave.我用sqlyog链接centos上的数据库时遇到经常碰到的问题，“mysql"Access...
vite打包@antv/data-set报错
博客不一定要自己做
05-13 1000
TypeError: Cannot read properties of undefined (reading 'Graph') 解决方法 import DataSet from '@antv/data-set/build/data-set'; const dv = new DataSet.View().source(data);
推荐开源项目：data-set - 状态管理的数据集库
gitblog_00096的博客
05-27 355
推荐开源项目：data-set - 状态管理的数据集库 data-set state driven all in one data process for data visualization. 项目地址: https://gitcode.com/gh_mirro...
【Antv-G6成长之路一】初识antv G6之什么是G6，G6能做哪些事情？（附实例图文）
赏樱看雪撸代码
02-26 3568
Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。
angular2 里引用data-set报错
qq_37477349的博客
07-22 443
报错内容： 前提： 已经执行了npm install @antv/data-set,但引入还是报错 解决方法有两种： 方法一、 1.在使用的组件文件夹下创建 modules.d.ts 文件 2.modules.d.ts 文件内容： declare module '@antv/data-set'; 方法二、 直接使用 const DataSet = require('@antv/data-set'); ...
vue 首次加载缓慢
﹏゛Aeljinh陌琳的博客
12-04 954
可参考 https://www.cnblogs.com/zyulike/p/11190012.html 第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。 首先我们可以安装webpack-bundle-analyzer 插件，通过这个插件我们可以在打包的时候看到打包文件的大小，可以明显的看出哪些文件
antv s2设置数据居中显示
最新发布
09-30
AntV S2（Scatterplot2）是一个强大的可视化库，用于创建二维和三维散点图。如果你想在S2图表中设置数据点的居中显示，你可以通过调整坐标轴范围和定位策略来实现。...这样就实现了数据点的居中展示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值