使用spring- boot和chart js可视化MySQL数据库中的数据
使用spring- boot和chart js可视化MySQL数据库中的数据
提问于 2020-12-12 04:45:53
我正在尝试使用chartjs可视化来自MySQL数据库的数据。我的ajax调用可以工作，因为我可以在web中看到数据，但不能创建图表。
我的代码：
控制器
public class Controller {
@Autowired
public MessageService messageService;
@Autowired
private MessageRepository messageRepository;
@RequestMapping(value = "/index")
public String index() {
return "index";
}
@RequestMapping("/getdatafromdevice")
@ResponseBody
public String getData(){
List<Message> dataList = messageRepository.findByDeviceid("device");
JsonArray jsonArrayTemperature = new JsonArray();
JsonArray jsonArrayHumidity = new JsonArray();
JsonArray jsonArrayDatetime = new JsonArray();
JsonObject jsonObject = new JsonObject();
dataList.forEach(data->{
jsonArrayTemperature.add(data.getTemperature());
jsonArrayHumidity.add(data.getHumidity());
jsonArrayDatetime.add(data.getDatetime());
});
jsonObject.add("temperature", jsonArrayTemperature);
jsonObject.add("humidity", jsonArrayHumidity);
jsonObject.add("datetime", jsonArrayDatetime);
return jsonObject.toString();
}
}索引html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data Visualization</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body class="bg-dark py-5">
<div class ="col-md-8 offset-md-2 " >
<div class="card" >
<div class="card-body">
<h1 class="text-center" >Data visualization <button class="btn btn-success" onclick="getChartData()">Update</button></h1>
</div>
<div class="card-body">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/js/chart.js"></script>
</html>我的Javascript chart.js
function renderChart(data, labels) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'temperature',
data: data[0],
borderColor: 'rgba(255,55,57,0.4)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
},
{
label: 'humidity',
data: data[1],
borderColor: 'rgba(192, 192, 192, 1)',
backgroundColor: 'rgba(192, 192, 192, 0.2)',
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 10,
suggestedMax: 100
}
}]
}
}
});
}
function getChartData() {
$.ajax({
url: "getdatafromdevice",
success: function (result) {
var data = [];
data.push(result.temperature);
data.push(result.humidity);
var labels = result.datetime;
renderChart(data, labels);
}
});
}当我运行这个应用程序并单击更新按钮时，我可以看到空的图表，但每次我单击按钮时，都会对数据库进行查询，我可以在web上看到我的数据，如下所示：
{,…}
datetime: ["2020-11-24 00:56:47", "2020-11-24 00:56:49", "2020-11-24 00:56:51", "2020-11-24 00:56:53",…]
humidity: [76.2616924895041, 75.73237408531122, 60.699698473163515, 73.70654165965911, 70.5605763362542,…]
temperature: [29.640586322716434, 26.97390069384724, 30.577907168201307, 21.844004972230522, 25.05155360103929,…]我不知道我是否需要在控制器或javascript中改变一些东西。也许我在getChartData函数中遗漏了json.parse，但由于我是chart js和jquery的初学者，我不知道该怎么做。你知道如何修复这段代码吗？
回答 1
Stack Overflow用户
发布于 2020-12-12 07:53:07
我解决了这个问题，以防有人路过需要创建类似的东西。
只需添加dataType: 'json',
该函数现在如下所示
function getChartData() {
$.ajax({
url: "getdatafromdevice",
dataType: 'json',
success: function (result) {
var data = [];
data.push(result.temperature);
data.push(result.humidity);
var labels = result.datetime;
renderChart(data, labels);
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65258406
复制相关文章
相似问题
腾讯云开发者
