这是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…"/></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>