Java 如何使用Highcharts折线图（使用Thymeleaf）上x轴的LinkedHashMap中的日期？_Java_Spring_Date_Highcharts_Thymeleaf

Java 如何使用Highcharts折线图（使用Thymeleaf）上x轴的LinkedHashMap中的日期？

java spring date highcharts

Java 如何使用Highcharts折线图（使用Thymeleaf）上x轴的LinkedHashMap中的日期？,java,spring,date,highcharts,thymeleaf,Java,Spring,Date,Highcharts,Thymeleaf,我不熟悉使用Highcharts，所以这可能是一个微不足道的问题。然而，通过我自己的谷歌搜索，我并没有取得多少成功我试图得到一个折线图来显示强度随时间的变化，但每次我插入keySet（）（类型为java.util.Date）作为X轴上的内容时，该图就会从网页上消失我希望一个正在进行的事件的记录和它进行的日期是图上的一个点（即（x，y）应该是（action，date）） Java素材： List<StrengthProgressPoint> records = getAllStre

我不熟悉使用Highcharts，所以这可能是一个微不足道的问题。然而，通过我自己的谷歌搜索，我并没有取得多少成功

我试图得到一个折线图来显示强度随时间的变化，但每次我插入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>

List records=getAllStrengthLogsForExercise（会话，练习名）；
Map strengthGraph=新建LinkedHashMap（）；
对于（StrengthProgressPoint p:记录）{
力量图（p.getDate（），p.getWeight（））；
}

海图资料：

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>


$（函数（）{
$（“#progressGraphContainer”）。高图({
标题：{
文本：“”
},
副标题:{
文本：“”
},
亚克斯：{
分:0,，
标题：{
文字：“举重”
}
},
xAxis：{
类别：[${strengthGraph.keySet（）}]]，
},
图例：{
已启用：false
},
打印选项：{
系列：{
标签：{
允许的连接器：false，
connectNulls:true
},
}
},
系列：[{
名称：'重量'，
数据：[${strengthGraph.values（）}]]
}],
响应：{
规则：[{
条件：{
最大宽度：500
},
图表选项：{
图例：{
已启用：false
}
}
}]
}
});
});

我确实有几次在我的网页上显示了一个图表，但从来没有得到我想要的。我似乎把它缩小到了“类别：[${strengthGraph.keySet（）}]]”，这是导致图形无法显示在网页上的罪魁祸首。我只希望HashMap中的日期显示在x轴上（当然与适当的值相对应）。

因为您将Thymeleaf与JavaScript一起使用，所以需要在

标记中指出这一点：

<script th:inline="javascript">

<html xmlns:th="http://www.thymeleaf.org">

因此，可以添加标签格式化程序。有很多方法可以格式化日期，我希望HighCharts有内置的方法来实现这一点，但我对它们不熟悉-因此这里有一个简单的JavaScript方法：

xAxis:{
类别：[${strengthGraph.keySet（）}]]，
标签：{
格式化程序：函数（）{
var d=Date.parse（这个.value）；
const ye=new Intl.DateTimeFormat（'en'，{year:'numeric'}）；
const mo=new Intl.DateTimeFormat（'en'，{month:'short'}）；
const da=new Intl.DateTimeFormat（'en'，{day:'2位'}）；
返回`${da}-${mo}-${ye}`；
}
}
},
...

现在，轴将使用如下标签：

15-Mar-2021

我从中获取了此格式化程序代码，其中还有其他方法

值得一提的是：当您在JavaScript中放置Thymeleaf表达式时，您可以通过将Thymeleaf表达式放置在注释中并在其位置提供默认值来抑制JavaScript语法错误：

categories: /*[[${strengthGraph.keySet()}]]*/ []

在这种情况下，

[]

是默认值。当Thymeleaf呈现表达式时，它将删除

/*

和

*/

注释分隔符，并删除默认表达式。

我忘了添加一个警告，提醒不要使用麻烦的

java.util.Date

并尽可能改用现代的

java.time

类。有关详细信息，请参阅。