介绍
数据表单及其相关数据是一个Web应用程序上最常见的用户界面之一。在处理表单数据方面，图表是一种很好的方式。借助图表，我们可以将数据以有意义的方式可视化，使用户更容易地理解和分析。本文将介绍如何使用Java和一些流行的Web框架来实现表单数据的图表展示功能。
准备
技术要求
要实现表单数据的图表展示功能，我们需要使用以下技术：
Java - 一种强健的、面向对象的编程语言。
Spring - 一个流行的Java Web框架，它提供了许多有用的功能，如依赖注入、AOP等。
Spring Boot - 基于Spring，它可以帮助我们快速构建Web应用程序。
Thymeleaf - 一个现代化的服务器端Java模板引擎，用于构建动态的Web应用程序。
Chart.js - 一个开源的JavaScript图表库，可以帮助我们创建各种类型的图表。
安装
首先我们需要安装Java以及Maven，然后使用Maven创建一个Spring项目：
mvn archetype:generate -DgroupId=com.example -DartifactId=form-data-chart -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
这将在当前目录下创建一个名为form-data-chart的项目。接下来，将下面的依赖添加到pom.xml文件中：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>chartjs</artifactId>
<version>2.7.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
这些依赖将帮助我们创建Web应用程序、使用Chart.js呈现图表，并使用Thymeleaf模板引擎构建动态页面。在实现Chart.js之前，我们需要先构建一个简单的表单，让用户输入数据。
创建表单
接下来，我们将创建一个简单的表单，让用户输入数据。我们将使用Bootstrap样式框架制作表单，以使其具有美观的外观和响应式布局。在src/main/resources/templates目录下创建一个名为form.html的文件：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Form Data Chart</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css">
<script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="container">
<h2>Data Form</h2>
<form th:action="@{/submit}" method="post">
<div class="form-group">
<label for="temperature">Temperature:</label>
<input type="number" class="form-control" id="temperature" placeholder="Enter Temperature" th:name="temperature">
</div>
<div class="form-group">
<label for="humidity">Humidity:</label>
<input type="number" class="form-control" id="humidity" placeholder="Enter Humidity" th:name="humidity">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body>
</html>
该表单包括两个输入字段和一个提交按钮。现在，我们将在后端构建一个控制器来处理表单数据并将其存储到数据库中。
创建控制器
在src/main/java/com/example/form-data-chart下创建一个名为FormDataController.java的类：
package com.example.formdatachart;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class FormDataController {
@RequestMapping("/")
public String form() {
return "form";
}
@PostMapping("/submit")
public String submit(String temperature, String humidity) {
// TODO: Save data to database
return "redirect:/";
}
}
该控制器包括两个方法：form()和submit()。当用户访问/时，将返回form.html文件。提交表单后，将调用submit()方法来处理表单数据。我们需要使用JDBC或其他ORM库将数据保存到数据库中。
创建图表
现在，我们已经成功地收集了表单数据并将其保存到数据库中。将数据呈现为有意义的图形是下一步。本文使用Chart.js来创建图表。首先，在src/main/resources/static目录下创建一个名为js的文件夹。在该文件夹中，创建一个名为chart.js的文件：
function createChart() {
$.ajax({
url: '/data',
type: 'GET',
dataType: 'json',
success: function(result) {
var data = {
labels: result.labels,
datasets: [
{
label: 'Temperature',
data: result.temperature,
fill: false,
borderColor: 'red'
},
{
label: 'Humidity',
data: result.humidity,
fill: false,
borderColor: 'blue'
}
]
};
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: data
});
}
});
}
$(document).ready(function() {
createChart();
});
在这段代码中，我们首先使用jQuery发送一个GET请求到/data端点，其返回一个JSON对象。该对象包括三个属性：labels、temperature和humidity。标签属性包含所有X轴标签的数组。 temperature和humidity分别包含了所有点的数组。我们使用这些数据创建一个新的Chart.js图表并绘制。
接下来，在src/main/resources/templates目录下创建一个名为chart.html的文件，以便用户可以看到图表。该文件的内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Form Data Chart</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css">
<script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/chartjs/2.7.3/dist/Chart.min.js}"></script>
<script th:src="@{/js/chart.js}"></script>
</head>
<body>
<div class="container">
<h2>Data Chart</h2>
<canvas id="chart" width="800" height="500"></canvas>
</div>
</body>
</html>
该文件包括一个使用Canvas元素的Chart.js图表，该元素指定其宽度和高度分别为800px和500px。此外，我们在头部引入了Chart.js库和我们的chart.js代码。
最后，在控制器中增加一个用于获取数据的方法：
@RequestMapping("/data")
@ResponseBody
public Map<String, Object> data() {
Map<String, Object> data = new HashMap<>();
List<String> labels = new ArrayList<>();
List<Integer> temperature = new ArrayList<>();
List<Integer> humidity = new ArrayList<>();
// TODO: Get data from database
data.put("labels", labels);
data.put("temperature", temperature);
data.put("humidity", humidity);
return data;
}
该方法返回一个包含所有标签、温度值和湿度值的Map对象。我们在这里使用了@RequestMapping和@ResponseBody注解，以便在不渲染HTML页面的情况下返回JSON数据。
在这篇文章中，我们已经介绍了如何使用Java和一些流行的Web框架来实现表单数据的图表展示功能。我们创建了一个简单的表单，将数据保存到数据库中，并使用Chart.js库创建了一个动态图表。此外，我们还介绍了如何将数据通过Spring控制器返回给前端JavaScript。