Конвертировать код JSP в JavaScript для canvasJS - PullRequest
Новая
       12

Конвертировать код JSP в JavaScript для canvasJS

0 голосов
/ 01 июля 2018

Я пытаюсь получить эту линейную диаграмму canvasJS для рендеринга с использованием тимелина, а не JSP.

В jsp есть следующий цикл, который мне нужно преобразовать в javascript. Однако я не опытный в javascript 

<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>

Указанный выше $ dataPointList создается в java следующим образом 

static List<Map<Object, Object>> dataPoints1 = new ArrayList<Map<Object, Object>>();

    static {
        int limit = 50000;
        int y = 100;
        Random rand = new Random();

        for (int i = 0; i < limit; i += 1) {
            y += rand.nextInt(11) - 5;
            map = new HashMap<Object, Object>();
            map.put("x", i);
            map.put("y", y);
            dataPoints1.add(map);
        }

        list.add(dataPoints1);
    }

    public static List<List<Map<Object, Object>>> getCanvasjsDataList() {
        return list;
    }

Я пробовал следующее, однако dps [parseInt (i)]. Push ({выдает ошибку типа. Я не уверен, как создать требуемую структуру данных для canvasJS, учитывая список данных, определенный в Java. 

  <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script type="text/javascript" th:inline="none" class="init">
            /*<![CDATA[*/
            window.onload = function (e) {
                var dps = [[]];
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "light2", // "light1", "dark1", "dark2"
                    animationEnabled: true,
                    zoomEnabled: true,
                    title: {
                        text: "Try Zooming and Panning"
                    },
                    data: [{
                            type: "area",
                            dataPoints: dps[0]
                        }]
                });

                var xValue;
                var yValue;

                var dataPointsList = /*[[${dataPointsList}]]*/ 'default';

                for (var i = 0; i < dataPointsList.length; i++) {
                    var dataPoints = dataPointsList[i];
                    for (var j = 0; j < dataPoints.length; j++) {
                        dps[parseInt(i)].push({
                        x : dataPoints[j].x,
                        y : dataPoints[j].y,
                    });     
                    }
                }


                chart.render();

            }
            /*]]>*/
        </script>

1 Ответ

0 голосов
/ 01 июля 2018

Следующие корректировки привели к отображению графика 

    <script type="text/javascript" th:inline="javascript" class="init">
        /*<![CDATA[*/
        window.onload = function (e) {
            var dps = [];
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2", // "light1", "dark1", "dark2"
                animationEnabled: true,
                zoomEnabled: true,
                title: {
                    text: "Try Zooming and Panning"
                },
                data: [{
                        type: "area",
                        dataPoints: dps
                    }]
            });


            var dataPointsList = /*[[${dataPointsList}]]*/ 'null';

            count = 0;
            for (var i = 0; i < dataPointsList.length; i++) {
                var dataPoints = dataPointsList[i];
                for (var j = 0; j < dataPoints.length; j++) {
                    dps[count++] = {
                        x: dataPoints[j].x,
                        y: dataPoints[j].y
                    };
                }
            }
            chart.render();
        }
        /*]]>*/
    </script>
...