Question

我想使用Highcharts创建图表。我对JS一无所知:)我用Java编写代码

我在控制器类中有一个地图：

Map<Integer, Integer> surveyMap = new LinkedHashMap<>();
    surveyMap.put(10, 21);
    surveyMap.put(12, 23);
    surveyMap.put(14, 25);
    surveyMap.put(16, 17);

这是我的html文件：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="ISO-8859-1" />
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- Optional theme -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />

</head>
<body>
<div class="container">
    <h2 align="center">Technology Line Graph</h2>

    <div id="container"
         style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script th:inline="javascript">
    $(function(){

        Highcharts.chart('container', {


            xAxis: {
                title: {
                    text: 'Dive time'
                }

            },

            yAxis: {
                title: {
                    text: 'Dive Depth'
                }

            },

            series: [{
                data: [${surveyMap.values()},${surveyMap.values()}]
            }]
        });
    });
</script>

</body>
</html>

当然不行。如何在地图上为x和y轴设置数据？

也许这只是语法错误。有更好的解决方案吗？

Highcharts-如何从Java映射设置x轴和y轴的数据

0 个答案: