highcharts 不在 grails 视图中呈现答案

【问题标题】：highcharts are not rendering in grails viewshighcharts 不在 grails 视图中呈现
【发布时间】：2014-12-05 15:44:36
【问题描述】：

我正在尝试在 grails 中执行一个简单的 highcharts 图表。我创建了一个控制器（测试）并在控制器中创建了索引闭包。

在视图中，我在测试目录中创建了 index.gsp 页面。我已将http://www.highcharts.com/docs/getting-started/your-first-chart 给出的代码复制到 index.gsp 中。我尝试了 JQuery 示例。它工作正常，没有任何问题。但是，如果我在 index.gsp 页面中包含 grails 元数据布局代码，则图表永远不会呈现图表。

请有人可以为我提供解决此问题的解决方案。

您的帮助将不胜感激。

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>

谢谢。

【问题讨论】：

请添加你的layout.gsp和index.gsp的代码
是的，请添加您的布局和索引页面的代码。谢谢

标签： javascript jquery grails highcharts

【解决方案1】：

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

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

改变它，它会起作用。谢谢。

【讨论】：

我已经尝试过带空间的 layoutresources 和 layouthead，但没有运气。

【解决方案2】：

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

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

<r:layoutResources />

【讨论】：