时间戳

首页 > 解决方案 > 折线图 - CanvasJS 和 .jsp 文件

jsp - 折线图 - CanvasJS 和 .jsp 文件

问题描述

我有个人项目，我想展示一个包含一些数据的简单图表。X 轴上有日期，Y 上有 int 结果。我在 Spring Boot 中有 Hibernate (MySQL) 和 .jsp 视图的项目，现在我正在尝试实现 CanvasJS。我不知道他们在这里的第二个循环中做了什么：https ://canvasjs.com/spring-mvc-charts/line-chart/

<c:forEach items="${dataPointsList}" var="dataPoints" varStatus="loop"> 
    <c:forEach items="${dataPoints}" var="dataPoint">
        xValue = parseInt("${dataPoint.x}");
        yValue = parseFloat("${dataPoint.y}");
        dps[parseInt("${loop.index}")].push({
            x : xValue,
            y : yValue
        });     
    </c:forEach>    
</c:forEach>

为什么他们引用 dataPoints: dps[0]和 xValue 是 data.point.x，而不是来自 List 值？

这是我的代码：

控制器：

@GetMapping("/sugarplus/sugars/graphs")
    public String showCharts(ModelMap modelMap){
        List<Sugar> sugarList = jpaSugarService.findSugarsByDate();
        modelMap.addAttribute("sugarDataChart", sugarList);
        return "test";
    }

.jsp 文件与 javascript：

<!DOCTYPE HTML>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css"/>
<%@    include file="header.jsp" %>
<head>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">

        window.onload = function () {
            let arr = [];
            let chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Wykres pomiarów"
                },
                axisX: {
                    title: "Data pomiaru",
                    gridThickness: 2,
                    valueFormatString: "DD MMM"
                },
                axisY: {
                    title: "Cukier"
                },
                data: [
                    {
                        type: "line",
                        xValueType: "dateTime",
                        dataPoints: arr[0]
                    }
                ]
            });

            let xValue;
            let yValue;
            <c:forEach items="${sugarDataChart}" var="sugars" varStatus="loop">

                <c:forEach items="${dataPoints}" var="dataPoints">

                    xValue = "${dataPoints.x}";
                    yValue = "${dataPoints.y}";
                    arr["${loop.index}"].push({
                        x: xValue,
                        y: yValue
                    });
            </c:forEach>
            </c:forEach>
            chart.render();
        }
    </script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
<%@    include file="footer.jsp" %>
</html>

标签： jspchartscanvasjs

解决方案

推荐阅读