随笔 - 299 文章 - 0 评论 - 0 阅读 - 6322

课堂测试试卷—数据清洗

package Database;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class DataDAO {

private static final String JDBC_URL = "jdbc:mysql://localhost:3306/t";
private static final String JDBC_USER = "root";
private static final String JDBC_PASSWORD = "123456";

public List<DataPoint> getData() {
List<DataPoint> dataPoints = new ArrayList<>();
try {
Class.forName("com.mysql.cj.jdbc.Driver");
Connection connection = DriverManager.getConnection(JDBC_URL, JDBC_USER, JDBC_PASSWORD);
String query = "SELECT id, total FROM result3";
PreparedStatement preparedStatement = connection.prepareStatement(query);
ResultSet resultSet = preparedStatement.executeQuery();
while (resultSet.next()) {
String date = resultSet.getString("id");
String value = resultSet.getString("total");
DataPoint dataPoint = new DataPoint(date, value);
dataPoints.add(dataPoint);
}
resultSet.close();
preparedStatement.close();
connection.close();
} catch (Exception e) {
e.printStackTrace();
}
return dataPoints;
}
}

package Database;

public class DataPoint {
private String ip;
private String total;

public DataPoint(String date, String value) {
this.ip = date;
this.total = value;
}

public String getDate() {
return ip;
}

public String getValue() {
return total;
}
}

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="Database.DataPoint" %>
<%@ page import="Database.DataDAO" %>
<%@ page import="java.util.List" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼状图</title>

<script src="js/echarts.min.js"></script>
</head>
<body>
最受欢迎的Top10课程

<div style="width: 100%; display: flex; justify-content: space-around;">

<div id="pieChart" style="width: 50%; height: 600px;"></div>


<div id="legendContainer" style="width: 30%;"></div>
</div>

<%
// 获取数据并转换为JSON格式
DataDAO dataDAO = new DataDAO();
List<DataPoint> dataPoints = dataDAO.getData();
String dataJSON = "[";
for (DataPoint dataPoint : dataPoints) {
// 在这里，将日期作为饼状图的标签，值作为饼状图的数据
dataJSON += "{'name': '" + dataPoint.getDate() + "', 'value': " + dataPoint.getValue() + "},";
}
dataJSON = dataJSON.substring(0, dataJSON.length() - 1) + "]";
%>

<script>
var data = <%= dataJSON %>;

// 使用ECharts绘制饼状图
var myChart = echarts.init(document.getElementById('pieChart'));
var option = {
title: {
text: '饼状图'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '数据',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data
}
]
};
myChart.setOption(option);

// Create a legend
var legendContainer = document.getElementById('legendContainer');
var legendHtml = '<div style="padding: 10px;"><h4>Legend</h4><ul>';
data.forEach(function(item) {
legendHtml += '<li>' + item.name + '</li>';
});
legendHtml += '</ul></div>';
legendContainer.innerHTML = legendHtml;
</script>
</body>
</html>