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視圖

回答

相關問題