添加第二组数据后不显示图表

时间:2017-07-25 12:42:31

标签: javascript grails anychart

这是Grails应用程序的一部分。用户单击按钮以创建API。它们被发送到另一个页面,在那里他们填写一些数据并单击执行按钮。一旦api完成执行,它们将被重定向到此页面(list.gsp),该页面顶部有一个图表。它是一个显示数据的条形图。图表应显示一组数据,然后当执行第二个api时,相同的图表应重新显示两组/两组数据。

在我的笔记本电脑上发生了什么,第二个api执行后图表消失了。在修改此代码的其他开发者笔记本电脑上显示正常。我完全被这个困扰了。我甚至让他们拉上他们的项目并发送给我。我跑他们的结果相同。我们运行相同版本的java(7)和grails(2.2.5)。任何指针赞赏!

 <%@ page import="foo.Api" %>
 <!DOCTYPE html>
 <html>
    <head>
        <meta name="layout" content="main">
        <g:set var="entityName" value="${message(code: 'default.api.label', default: 'Api')}" />

        <title><g:message code="default.list.label" args="[entityName]" /></title>
        <script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.css">
    </head>
    <body>
        <a href="#list-api" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
        <div class="nav" role="navigation">
        <ul>
            <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
            <li><g:link class="create" action="create"><g:message code="default.button.execute.label" args="[entityName]" /></g:link></li>
        </ul>
    </div>

    <div id="container" style="width: 500px; height: 400px;"></div>

    %{--<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">--}%
    <script >

        anychart.onDocumentLoad(function(){
            %{--var data = [--}%
                %{--["Cheapest", ${fieldValue(bean: apiInstance, field: "cheapestPrice")}, 100, 175],--}%
                %{--["Highest", ${fieldValue(bean: apiInstance, field: "highestPrice")}, 200, 250],--}%
                %{--["Range", ${fieldValue(bean: apiInstance, field: "rangePrice")}, 300, 400],--}%
                %{--["Average", ${fieldValue(bean: apiInstance, field: "averagePrice")}, 500, 600],--}%
                %{--["Median", ${fieldValue(bean: apiInstance, field: "medianPrice")}, 700, 800],--}%
                %{--["Avg/50", ${fieldValue(bean: apiInstance, field: "avg50")}, 900, 1000],--}%
            %{--];--}%

            var data = [
                    ["Cheapest"],
                    ["Highest"],
                    ["Range"],
                    ["Average"],
                    ["Median"],
                    ["Avg/50"]
            ];

            data.forEach(function(d){
                <g:each in="${apiInstanceList}" var="apiInstance">
                    if(d[0] == "Cheapest"){
                        d.push(${fieldValue(bean: apiInstance, field: "cheapestPrice")});
                    } else if (d[0] == "Highest"){
                        d.push( ${fieldValue(bean: apiInstance, field: "highestPrice")});
                    }else if (d[0] == "Range"){
                        d.push( ${fieldValue(bean: apiInstance, field: "rangePrice")});
                    }else if (d[0] == "Average"){
                        d.push( ${fieldValue(bean: apiInstance, field: "averagePrice")});
                    }else if (d[0] == "Median"){
                        d.push( ${fieldValue(bean: apiInstance, field: "medianPrice")});
                    }else  if (d[0] == "Avg/50"){
                        d.push( ${fieldValue(bean: apiInstance, field: "avg50")});
                    }
                </g:each>
            });

            // create mapping list on one data set
            var dataMappingList = anychart.data.mapAsTable(data);


            // map x and value from the data set
            //compares every 2 apiInstances
            for(var i=0; i<dataMappingList.length; i+= 2){
                var colChart = anychart.column(dataMappingList[i], dataMappingList[i+1]);

                colChart.title("Top Flight Search Statistics");
                colChart.container("container");
                colChart.draw();
            }

        });

        %{--anychart.onDocumentLoad(function() {--}%
            %{--var data = anychart.data.set([--}%

                %{--["Cheapest", ${fieldValue(bean: apiInstance, field: "cheapestPrice")}],--}%
                %{--["Highest", ${fieldValue(bean: apiInstance, field: "highestPrice")}],--}%
                %{--["Range", ${fieldValue(bean: apiInstance, field: "rangePrice")}],--}%
                %{--["Average", ${fieldValue(bean: apiInstance, field: "averagePrice")}],--}%
                %{--["Median", ${fieldValue(bean: apiInstance, field: "medianPrice")}],--}%
                %{--["Avg/50", ${fieldValue(bean: apiInstance, field: "avg50")}],--}%
                %{--<%--  This is an example of changing the color of one bar in the chart ["Peter", 13000, 16500, "#5cd65c", "#009933", null, {enabled: true}],  --%>--}%

            %{--]);--}%
            %{--// create an instance of a chart with data--}%
            %{--var chart = anychart.column();--}%
            %{--var series = chart.column(data);--}%
            %{--chart.title("Top Flight Search Statistics");--}%
            %{--// pass the container id, chart will be displayed there--}%
            %{--chart.container("container");--}%
            %{--// call the chart draw() method to initiate chart display--}%
            %{--chart.draw();--}%
        %{--});--}%
        </script>
    %{--</tr>--}%
    <div id="list-api" class="content scaffold-list" role="main">
        <h1><g:message code="default.list.label" args="[entityName]" /></h1>
        <g:if test="${flash.message}">
        <div class="message" role="status">${flash.message}</div>
        </g:if>
        <table>
            <thead>
                <tr>
                    <g:sortableColumn property="origin" title="${message(code: 'api.origin.label', default: 'Origin')}" />
                    <g:sortableColumn property="destination" title="${message(code: 'api.destination.label', default: 'Destination')}" />
                    <g:sortableColumn property="departureDate" title="${message(code: 'api.departureDate.label', default: 'Departure Date')}" />
                    <g:sortableColumn property="returnDate" title="${message(code: 'api.returnDate.label', default: 'Return Date')}" />
                    <g:sortableColumn property="cabin" title="${message(code: 'api.cabin.label', default: 'Cabin')}" />
                    <g:sortableColumn property="cheapestPrice" title="${message(code: 'api.cheapestPrice.label', default: 'Cheapest $')}" />
                    <g:sortableColumn property="highestPrice" title="${message(code: 'api.highestPrice.label', default: 'Highest $')}" />
                    <g:sortableColumn property="averagePrice" title="${message(code: 'api.averagePrice.label', default: 'Average $')}" />
                </tr>
            </thead>
            <tbody>
            <g:each in="${apiInstanceList}" status="i" var="apiInstance">
                <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
                    <td>${fieldValue(bean: apiInstance, field: "origin")}</td>
                    <td>${fieldValue(bean: apiInstance, field: "destination")}</td>
                    <td><g:formatDate date="${apiInstance.departureDate}" /></td>
                    <td><g:formatDate date="${apiInstance.returnDate}" /></td>
                    <td>${fieldValue(bean: apiInstance, field: "cabin")}</td>
                    <td>${fieldValue(bean: apiInstance, field: "cheapestPrice")}</td>
                    <td>${fieldValue(bean: apiInstance, field: "highestPrice")}</td>
                    <td>${fieldValue(bean: apiInstance, field: "averagePrice")}</td>
                </tr>
            </g:each>
            </tbody>
        </table>

        <div class="pagination">
            <g:paginate total="${apiInstanceTotal}" />
        </div>
    </div>
</body>

0 个答案:

没有答案