javascript - 标签未在带有 Grails 的 Chart.js 中显示

Question

我希望将数据从 Grails Controller 传递到 Grails View 中的 Chart.js 图表。我的代码将无法正确显示图表标签。 问题是 labels (日期数组列表)在 Javascript 中没有被正确读取为字符串数组，这导致 Chart.js 无法显示。

有人可以提供帮助吗？

如有任何帮助，我们将不胜感激。提前致谢! 我的代码在这里:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
        var userResult = ${userResultMap as JSON};
        var data = userResult.result;
        var labels = userResult.dateCreated;

     var config = {
        type: 'line',
        data: {
            labels: testDate,
            datasets: [{
                label: 'Clinical FRE',
                backgroundColor: '#7A564A',
                borderColor: '#7A564A',
                data: result,
                fill: false
            }]
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                enabled: false
            },
            responsive: true,
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        color: ['#9b1f22', '#9b1f22', '#ed1c24', '#ed1c24', '#f7931f', '#f7931f', '#206b36', '#206b36', '#206b36', '#206b36', '#206b36']
                    },
                    ticks: {
                        min: 0,
                        max: 100,
                        stepSize: 10,
                        callback: function (value) {
                            return value + "%"
                        }
                    }
                }]
            }
        }
    };

window.onload = function createChart(data) {
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myLine = new Chart(ctx, config)
};

</script>

使用 ModelandView 命令从 Controller 发送数据:

@Secured('ROLE_USER')
def home() {
    try {
        SecUser user = springSecurityService.currentUser
        Participant p = Participant.findByUser(user)
        Result userResults = Result.findByUser(user)
        def userResultsList
        def riskLevelMap
        def iconClassMapList = []
        def riskLevelMapList = []
        def colourNameList = []
        Map userResultMap = [:]

        if (userResults!= null){
            userResultsList = userResults.list()
            if(userResultsList != null)
            userResultsList.each {list->
                iconClassMapList.add(previousTestsService?.getIconType(list))
                riskLevelMap = riskAdviceService?.riskLevel(list.result)
                riskLevelMapList.add(riskLevelMapList)
                colourNameList.add(riskLevelMap?.colourName)
            }


            userResultMap.put("result",userResultsList?.result)                
            userResultMap.put("dateCreated",userResultsList?.dateCreated)
            println userResultMap
            println userResultsList.dateCreated
            println(userResultsList.dateCreated.getClass())

        }

        return new ModelAndView('home', [user: user, participant: p, username: user.username,userResultsList: userResultsList,iconClassMapList:iconClassMapList,colourNameList:colourNameList,userResultMap:userResultMap])

    } catch (Exception ex) {
        log.error(ex.printStackTrace())
    }
}

示例数据: 数据 - [13.7] 标签 - [2018-09-17 16:39:00.0]

Answer 1

这里的主要问题是 grails 在插入 GSP 页面时自动将值转义为 HTML。您可以通过添加建议来抑制这种情况

<%@ expressionCodec="none" %>

位于 GSP 页面的开头。

请注意，更改后您的应用程序的安全性将会降低。特别是如果数据可以包含用户创建的输入，人们可能会开始弄乱您的应用程序。

这里是一个使用 Grails 3.3.8 的运行示例，基于 @Kumar Chapagain 提供的测试数据，非常感谢。

在 Controller 中，您不需要将数据打包到 ModelAndView 中，因为这是由 Grails 自动完成的。只需返回包含所需条目的 map 即可。我更喜欢在 Controller 内而不是在 gsp 页面中将 map 转换为 JSON，因为这样可以将控件保留在其所属的位置，并且 GSP 更简单。

Controller :

package g338

import grails.converters.JSON

class ChartController {

    def index() {

        Map userResultMap = [:]
        List dateCreated = ["2018-09-17 13:07:06.0","2018-09-17 13:27:06.0","2018-09-17 14:27:06.0","2018-09-17 17:27:06.0"]
        List result = [50, 56, 23, 42]
        userResultMap.put("dateCreated",dateCreated)
        userResultMap.put("result",result)

        [ userResultMap: userResultMap as JSON ]
    }
}

gsp页面:views/chart/index.gsp

<%@ expressionCodec="none" %>
<!doctype html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Welcome to Grails</title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <g:javascript>
    var result = ${userResultMap};
    var data = result.result;
    var labels = result.dateCreated;

    var config = {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Clinical FRE',
                backgroundColor: '#7A564A',
                borderColor: '#7A564A',
                data: result,
                fill: false
            }]
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                enabled: false
            },
            responsive: true,
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        color: ['#9b1f22', '#9b1f22', '#ed1c24', '#ed1c24', '#f7931f', '#f7931f', '#206b36', '#206b36', '#206b36', '#206b36', '#206b36']
                    },
                    ticks: {
                        min: 0,
                        max: 100,
                        stepSize: 10,
                        callback: function (value) {
                            return value + "%"
                        }
                    }
                }]
            }
        }
    };

    window.onload = function createChart(data) {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myLine = new Chart(ctx, config)
    };

    </g:javascript>

</body>
</html>