我是一个新的使用海图，所以这可能是一个微不足道的问题。然而，通过我自己的谷歌搜索，我并没有取得太大的成功。
我试图得到一个折线图来显示强度随时间的变化，但是每次我插入keyset（）（类型java.util.date）作为x轴上的内容时，这个图就会从网页上消失。
我希望一个事件的记录和完成日期是图表上的一个点（即（x，y）应该是（action，date））。
java材料：
List<StrengthProgressPoint> records = getAllStrengthLogsForExercise(session, exerciseName);
Map<Date, Double> strengthGraph = new LinkedHashMap<>();
for(StrengthProgressPoint p : records) {
strengthGraph.put(p.getDate(), p.getWeight());
}海图资料：
<script>
$(function () {
$('#progressGraphContainer').highcharts({
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
min: 0,
title: {
text: 'Weight Lifted'
}
},
xAxis: {
categories: [[${strengthGraph.keySet()}]],
},
legend: {
enabled: false
},
plotOptions: {
series: {
label: {
connectorAllowed: false,
connectNulls: true
},
}
},
series: [{
name: 'Weight',
data: [[${strengthGraph.values()}]]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
});
});
</script>我确实在我的网页上显示了几次图表，但从来没有得到我想要的。我似乎把范围缩小到了“categories:${strengthgraph.keyset（）}”，这是导致图形无法显示在网页上的罪魁祸首。我只希望hashmap中的日期显示在x轴上（当然，与适当的值相对应）。
1条答案
按热度按时间sbtkgmzw1#
因为您将thymeleaf与javascript一起使用，所以需要在
<script>标签：否则，就无法将java对象呈现为等价的javascript对象。
我假设您已经在页面的
<html>标签：日期将显示在x轴上-但格式可能有点麻烦-例如：
因此，可以添加标签格式化程序。格式化日期的方法有很多种，我希望highcharts有内置的方法，但我对它们并不熟悉——所以这里有一个简单的javascript方法：
现在轴将使用如下标签：
我从这个问题中得到了格式化程序代码，这里还有其他方法。
值得一提的是：在javascript中放置thymeleaf表达式时，可以通过将thymeleaf表达式放置在注解中并在其位置提供默认值来抑制javascript语法错误：
在这种情况下
[]是默认值。当thymeleaf呈现表达式时，它将删除/*以及*/注解分隔符，并删除默认表达式。