Метка не отображается в Chart.js с Grails

Question

Я хочу передать данные из контроллера Grails на диаграмму chart.js в представлении Grails.Мой код не будет правильно отображать метки диаграмм.Проблема заключается в том, что labels (arrayList дат) не читается правильно как массив строк в 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

var labels = userResult.dateCreated;

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

вы используете метки: testDate, но при назначении меток меткам попробуйте

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

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 автоматически экранирует значения в виде HTML при вставке на страницу GSP. Вы можете подавить это, добавив совет

<%@ expressionCodec="none" %>

в начале страницы GSP.

Имейте в виду, что ваше приложение будет менее защищенным после внесения изменений. Особенно, если данные могут содержать созданные пользователем данные, люди могут начать возиться с вашим приложением.

Вот пример использования Grails 3.3.8, основанный на тестовых данных, предоставленных @Kumar Chapagain, большое спасибо.

В контроллере вам не нужно упаковывать данные в ModelAndView, поскольку это делается автоматически Grails. Просто верните карту с необходимыми записями. Я предпочитаю преобразовывать карту в 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

Вам нужно преобразовать ваш массив, объект, который вы используете, в JSON для JavaScript, чтобы понять это.

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