Question

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

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

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

我们将不胜感激。

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>

感谢。

Answer 1

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

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

更改此功能，即可使用。感谢。

Answer 2

如果我使用r：layoutResources，则Highcharts不起作用在main.gsp中。如果我从main.gsp中删除r：layoutResources，它就可以工作。

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

<r:layoutResources />

highcharts不会在grails视图中呈现

2 个答案: