highcharts不是呈现在grails视图

我想在grails中执行一个简单的高图表。我创建了一个控制器（测试），并在控制器中创建了索引关闭。highcharts不是呈现在grails视图

在视图中，我在Test dir中创建了index.gsp页面。我已将http://www.highcharts.com/docs/getting-started/your-first-chart中给出的代码复制到index.gsp中。我尝试了JQuery示例。它工作正常，没有任何问题。但是，如果我在index.gsp页面中包含grails元数据布局代码< meta name =“layout”content =“main”/>，则图表从不呈现图表。

请问有人能为我提供解决方案来解决这个问题。

您的帮助，将不胜感激。

index.gsp中：

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Chart</title> 

<meta name="layout" content="main" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 


<script type="text/javascript"> 
$(function() { 
$("#container").highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Fruit Consumption' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Bananas', 'Oranges'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Fruit eaten' 
     } 
    }, 
    series: [{ 
     name: 'Jane', 
     data: [1, 0, 4] 
    }, { 
     name: 'John', 
     data: [5, 7, 3] 
    }] 
}); 
}); 
</script> 

</head> 

<body> 


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

</body> 
</html>

main.gsp：

<!DOCTYPE html> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]--> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title><g:layoutTitle default="Grails"/></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"> 
    <link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}"> 
    <link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}"> 
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css"> 
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css"> 
    <g:layoutHead/> 
    <g:javascript library="application"/>  
    <r:layoutResources /> 
</head> 
<body> 
    <div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div> 
    <g:layoutBody/> 
    <div class="footer" role="contentinfo"></div> 
    <div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading&hellip;"/></div> 
    <r:layoutResources /> 
</body> 
</html>

感谢。

来源

2014-12-05 user3719407

请将您layout.gsp的代码和index.gsp中 – agusluc 2014-12-05 15:45:48

是，请将您的布局和索引页的代码。谢谢 – Biswas 2014-12-05 15:48:06

如果我在main.gsp中使用r：layoutResources ，Highcharts不起作用。如果我从main.gsp中删除r：layoutResources，它将起作用。

我从main.gsp中删除了下面的代码。它解决了我的问题。

<r:layoutResources />

来源

2015-01-13 09:22:20 user3719407

在main.gsp中<g:layoutHead/>和<r:layoutResources/>的位置不正确。它必须是

<r:layoutResources /> 
<g:layoutHead />

改变这一点，它会工作。谢谢。

来源

2014-12-05 16:30:56 Biswas

我已经尝试过使用空间布局资源和layouthead，但没有运气。 – user3719407 2014-12-05 19:43:53

highcharts不是呈现在grails视图

回答

相关问题