duyumeng
/
java
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

上传文件至 'project/visualization'

main
duyumeng 3 weeks ago
parent
dc44da099d
commit
67ce87d40b
3 changed files with 40 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      project/visualization/earthquake.html
  2. 14
      project/visualization/news.html
  3. 11
      project/visualization/weather.html

15
project/visualization/earthquake.html
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Earthquake Data 2026</title>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<style>
body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#1a2a6c 0%,#b21f1f 50%,#fdbb2d 100%);}
.container{max-width:1400px;margin:0 auto;}
.panel{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);margin-bottom:30px;}
h1{text-align:center;color:#fff;margin-bottom:30px;}
table{width:100%;border-collapse:collapse;margin-top:20px;}
th,td{padding:12px;border:1px solid #ddd;text-align:center;}
th{background:#f5f5f5;}
</style></head><body><div class='container'><h1>Earthquake Data 2026</h1><div class='panel'><canvas id='magnitudeChart'></canvas></div><div class='panel'><table><tr><th>Time</th><th>Magnitude</th><th>Location</th></tr><tr><td>2026-05-30 20:53:55</td><td>5.0</td><td>Sichuan Aba</td></tr><tr><td>2026-05-29 02:53:55</td><td>4.4</td><td>Yunnan Dali</td></tr><tr><td>2026-05-28 22:53:55</td><td>5.1</td><td>Xinjiang Hotan</td></tr><tr><td>2026-05-27 15:53:55</td><td>5.4</td><td>Qinghai Yushu</td></tr><tr><td>2026-05-26 09:53:55</td><td>6.3</td><td>Tibet Shigatse</td></tr><tr><td>2026-05-25 15:53:55</td><td>5.2</td><td>Gansu Gannan</td></tr><tr><td>2026-05-24 18:53:55</td><td>6.2</td><td>Sichuan Liangshan</td></tr><tr><td>2026-05-23 17:53:55</td><td>4.1</td><td>Yunnan Baoshan</td></tr><tr><td>2026-05-22 11:53:55</td><td>5.6</td><td>Xinjiang Kizilsu</td></tr><tr><td>2026-05-21 19:53:55</td><td>5.2</td><td>Qinghai Haixi</td></tr></table></div></div><script>const magnitudes=[5.0,4.4,5.1,5.4,6.3,5.2,6.2,4.1,5.6,5.2];new Chart(document.getElementById('magnitudeChart'),{type:'bar',data:{labels:magnitudes.map((_,i)=>'EQ'+(i+1)),datasets:[{label:'Magnitude',data:magnitudes,backgroundColor:'rgba(231,76,60,0.8)'}]},options:{responsive:true}});</script></body></html>

14
project/visualization/news.html
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>News Rank 2026</title>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<style>
body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);}
.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
h1{text-align:center;color:#333;margin-bottom:30px;}
.item{padding:20px;margin:15px 0;border-radius:10px;background:linear-gradient(135deg,#ffecd2 0%,#fcb69f 100%);}
.rank{font-size:28px;font-weight:bold;color:#e74c3c;display:inline-block;margin-right:15px;background:#fff;width:50px;height:50px;border-radius:50%;text-align:center;line-height:50px;}
.title{font-size:18px;font-weight:bold;color:#333;}
</style></head><body><div class='container'><h1>News Rank Top 10</h1><canvas id='newsChart'></canvas><h2 style='margin-top:40px;'>News Details</h2><div class='item'><span class='rank'>1</span><span class='title'>Tech Frontier: AI Model Breaks Record</span></div><div class='item'><span class='rank'>2</span><span class='title'>Economic Outlook: Q1 2026 Analysis</span></div><div class='item'><span class='rank'>3</span><span class='title'>Sports: World Cup Qualifiers</span></div><div class='item'><span class='rank'>4</span><span class='title'>Culture: Annual Film Festival Opens</span></div><div class='item'><span class='rank'>5</span><span class='title'>Health: New Vaccine Developed</span></div><div class='item'><span class='rank'>6</span><span class='title'>Environment: Carbon Neutral Progress</span></div><div class='item'><span class='rank'>7</span><span class='title'>Education: Exam Policy Adjusted</span></div><div class='item'><span class='rank'>8</span><span class='title'>Military: Defense Tech Breakthrough</span></div><div class='item'><span class='rank'>9</span><span class='title'>Entertainment: Celebrity's New Work</span></div><div class='item'><span class='rank'>10</span><span class='title'>Society: Infrastructure Accelerates</span></div></div><script>const titles=['Tech Frontier: AI Model B...','Economic Outlook: Q1 2026...','Sports: World Cup Qualifi...','Culture: Annual Film Fest...','Health: New Vaccine Devel...','Environment: Carbon Neutr...','Education: Exam Policy Ad...','Military: Defense Tech Br...','Entertainment: Celebrity'...','Society: Infrastructure A...'];const hots=[4982567,3892456,3567234,2987654,2876543,2567890,2345678,2109876,1987654,1876543];new Chart(document.getElementById('newsChart'),{type:'bar',data:{labels:titles,datasets:[{label:'Hot Index',data:hots,backgroundColor:['rgba(255,99,132,0.8)','rgba(54,162,235,0.8)','rgba(255,206,86,0.8)','rgba(75,192,192,0.8)','rgba(153,102,255,0.8)','rgba(255,159,64,0.8)','rgba(199,199,199,0.8)','rgba(83,102,255,0.8)','rgba(40,167,69,0.8)','rgba(220,53,69,0.8)']}]},options:{indexAxis:'y',responsive:true}});</script></body></html>

11
project/visualization/weather.html
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Changsha Weather 2026</title>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<style>
body{font-family:Arial;margin:0;padding:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}
.container{max-width:1200px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.2);}
h1{text-align:center;color:#333;margin-bottom:30px;}
</style></head><body><div class='container'><h1>Changsha Weather 2026</h1><canvas id='weatherChart'></canvas></div><script>const ctx=document.getElementById('weatherChart').getContext('2d');const labels=['2026-01-01','2026-01-02','2026-01-03','2026-01-04','2026-01-05','2026-01-06','2026-01-07','2026-01-08','2026-01-09','2026-01-10','2026-01-11','2026-01-12','2026-01-13','2026-01-14','2026-01-15'];const highTemps=[26,30,33,26,31,32,27,26,27,26,27,30,33,26,34];const lowTemps=[18,23,22,15,22,16,24,20,19,23,20,18,18,24,22];new Chart(ctx,{type:'line',data:{labels:labels,datasets:[{label:'High',data:highTemps,borderColor:'rgb(255,99,132)',backgroundColor:'rgba(255,99,132,0.1)',tension:0.4,fill:true},{label:'Low',data:lowTemps,borderColor:'rgb(54,162,235)',backgroundColor:'rgba(54,162,235,0.1)',tension:0.4,fill:true}]},options:{responsive:true,plugins:{title:{display:true,text:'Temperature'}}}});</script></body></html>
Write Preview
Loading…
Cancel
Save