使用 Grails 时标签未显示在 Chart.js 中

Question

我希望将数据从 Grails 控制器传递到 Grails 视图中的 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 命令从控制器发送数据：

@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())
    }
}

示例数据： data - [13.7] labels - [2018-09-17 16:39:00.0]

Answer 1

您需要将您正在使用的数组、对象转换为 JSON，以便 JavaScript 理解它。

<g:javascript>
        var testDate = ${userResultsList.dateCreated}
        var result = ${userResultsList.result as JSON}    // make sure grails.converters.JSON is imported
</g:javascript>

Answer 2

确保来自控制器的 userResultsList(userListMap) 数据必须采用以下形式。

    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 数据解析为 JSON 如果没有解析并在 gsp 页面中做类似的事情：

<script>
    var userResult = ${userResultMap as JSON};
    var result = userResult.result;
    var labels = userResult.dateCreated;
</script>

Answer 3

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

来抑制这种情况

<%@ expressionCodec="none" %>

在 GSP 页面的开头。

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

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

在控制器中，您不需要将数据打包到 ModelAndView 中，因为这由 Grails 自动完成。只需 return 一张包含所需条目的地图。我更喜欢在控制器内将地图转换为 JSON，而不是在 gsp 页面中，因为它使控件保持在它所属的位置并且 GSP 更简单。

控制器：

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>

Answer 4

var labels = userResult.dateCreated;

     var config = {
        type: 'line',
        data: {
            labels: testDate,

您正在使用标签：testDate，但将标签分配给标签尝试

var testDate = userResult.dateCreated;
**labels: testDate**

使用 Grails 时标签未显示在 Chart.js 中

Label not showing in Chart.js with Grails

javascript

grails

groovy

chart.js