Question

我被要求将谷歌图表添加到我们当前的grails 2.1.0应用程序中。主gsp（showdata.gsp）加载并正常工作，但是当数据被重复调用第二个gsp（reloadshowdata.gsp）的javascript函数刷新时，图表不会显示 - 其他重新加载的数据将被刷新并正确显示。是否在第二个gsp中无法识别apiImport语句，如何才能显示图表？

showdetails.gsp -

<%@ page import="org.grails.plugins.google.visualization.data.Cell; org.grails.plugins.google.visualization.util.DateUtil" %>
<html>
<head>
 .... 

<r:script disposition='head'>   
 var reload = function()
 return <g:remoteFunction action="reloadshowdetails" controller="monitor" params="[ turbineId: turbineId ]" update="reloadshowdetails"/>}           
 setInterval( reload, 5000 );
</r:script>
<gvisualization:apiImport/>
</head>
<body>
....

gvisualization:gauge elementId="gauge" width="${200}" height="${200}" redFrom="${90}"        redTo="${100}" yellowFrom="${75}" yellowTo="${90}" minorTicks="${5}" columns="${guageColumns}" data="${guageData}" />

<table cellpadding="2" cellspacing="0">
 <tr><td> 
      <div id="gauge"></div>
 </td></tr>
 </table>    
</body>
</html>

reloadshowdetails.gsp -

<table>
<tbody> 
...
<gvisualization:gauge elementId="gauge2" width="${200}" height="${200}" redFrom="${90}" redTo="${100}" yellowFrom="${75}" yellowTo="${90}" minorTicks="${5}" columns="${guageColumns}" data="${guageData}" />

<table cellpadding="2" cellspacing="0">
    <tr><td>
            <div id="gauge2"></div>
     </td></tr>
 </table>
....

Answer 1

似乎没有调用更新图表的脚本，如果我假设你的控制器中有一个返回图表数据的远程函数reloadData，那么当你从服务器加载新的图表数据时，你必须执行将在你的页面中绘制它的javascript代码。尝试添加一个新函数（例如重绘）并在完全加载图表数据时调用它：

function repaint(guageData){
var chart = new google.visualization.ColumnChart(document.getElementById('html_chart_id'));
chart.draw(guageData, options);
}

var loadedData = function()
 return <g:remoteFunction action="reloadshowdetails"
 controller="monitor" params="[ turbineId: turbineId ]" update="reloadshowdetails"/>;
repaint(loadedData);

其中html_chart_id是图表的ID。

Grails：gsp重新加载谷歌图表不显示

1 个答案: