<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date,
java.io.IOException,
java.io.PrintWriter,
java.sql.Connection,
java.sql.DriverManager,
java.sql.ResultSet,
java.sql.SQLException,
java.sql.Statement
" %>
<%
//先说实现思路 在浏览器页面显示2023年12个月最高温度，和最低温度。柱状
//1、通过现有插件能在jsp上显示柱状界面
//2、分析柱状界面需要提供哪几方面信息， 月份，最高温度，最低温度。
//3、如何将单柱改为两柱
//4、哪些位置的信息需要手动调整
//5、哪些地方的数据需要从数据库获取
//6、在指定的数据库建立指定的表
//7、在建立好的表中提取数据
//8、提取数据需要 数据库地址 端口 数据库名 帐号和 密码
//9、连接数据库，建立sql执行接口和sql语句，执行语句，获取记录
//10、获取记录过程中将记录转化为需要的格式
//11、得到数据后加到展示图合理 位置上。
// https://m.runoob.com/chartjs/
/*
Chart.js 柱形图 https://m.runoob.com/try/try2.php?filename=trychartjs_bar
Chart.js 气泡图
Chart.js 环形图
Chart.js 饼图
Chart.js 折线图
Chart.js 混合图 https://m.runoob.com/try/try2.php?filename=trychartjs_scatter
Chart.js 极地图
Chart.js 雷达图
Chart.js 散点图
*/
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e2) {
e2.printStackTrace();
}
Connection con = null;
try {
con = DriverManager.getConnection("jdbc:mysql://mysql.sqlpub.com:3306/huangjin","laocooon","fc12f7a5215e8e0a");
} catch (SQLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
Statement stat = null;
try {
stat = con.createStatement();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String sql = "SELECT * FROM MonthlySorted";
ResultSet rs = null;
try {
rs = stat.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
String i11="",i22="",i33="";
try {
while(rs.next()) {
i11+="'"+rs.getString(1)+"',";
i22+="'"+rs.getString(2)+"',";
i33+="'"+rs.getString(3)+"',";
}
} catch (SQLException e) {
e.printStackTrace();
}
i11=i11.substring(0,i11.length()-1);
i22=i22.substring(0,i22.length()-1);
i33=i33.substring(0,i33.length()-1);
session.setAttribute("i1", i11);
session.setAttribute("i2", i22);
session.setAttribute("i3", i33);
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
stat.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
%>
<!DOCTYPE html>
<html>
<head>
<title>气温图表</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#myChart{
width:300px;
height: 300px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<%
Date date= new Date();
String path="./aaa?" + new Date();
%>
<%
String i1=(String)session.getAttribute("i1");
while (i1==null){
i1=(String)session.getAttribute("i1");
}
String i2=(String)session.getAttribute("i2");
String i3=(String)session.getAttribute("i3");
%>
<iframe src=<%=path%> class="hidden"></iframe>
<canvas id="myChart"></canvas>
<script>
var tempData = {
labels: [<%=i1%>],
datasets: [
{
label: "最高气温",
backgroundColor: "rgba(255,0,0,0.5)",
borderColor: "red",
borderWidth: 1,
data: [<%=i2%>]
},
{
label: "最低气温",
backgroundColor: "rgba(0,0,255,0.5)",
borderColor: "blue",
borderWidth: 1,
data: [<%=i3%>]
}
,
{
label: "最低气温",
backgroundColor: "rgba(0,0,255,0.5)",
borderColor: "blue",
borderWidth: 1,
data: [<%=i3%>]
},
{
label: "最低气温",
backgroundColor: "rgba(0,0,255,0.5)",
borderColor: "blue",
borderWidth: 1,
data: [<%=i3%>]
}
]
};
var tempOptions = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: tempData,
options: tempOptions
});
</script>
</body>
</html>
