2016-10-18 5 views
0

外部jsファイルのjquery(jqplot)関数をjspにリンクしたいが、これを行うときにチャートが生成されない。私のspring mvcアプリケーションのjspから外部jsのjquery関数を呼び出す

は私が${finalscorepercent}

にJSTLを通じてデータを動的に取得していますので、external.jsここ

$.jqplot.config.enablePlugins = true; 

var d1 = ${finalScorepercent} 
var d2 = 100 - ${finalScorepercent} 

var data = [ 
    ['FinalScore', d1], 
    ['f', d2], 

]; 

var plot4 = $.jqplot('finalScorepercent', [data], { 

    seriesDefaults: { 
     // make this a donut chart. 
     renderer: $.jqplot.DonutRenderer, 
     rendererOptions: { 
      fillToZero: true, 
      // Donut's can be cut into slices like pies. 
      sliceMargin: 3, 
      // Pies and donuts can start at any arbitrary angle. 
      startAngle: -90, 
      /* showDataLabels: true, */ 
      // By default, data labels show the percentage of the donut/pie. 
      // You can show the data 'value' or data 'label' instead. 
      /* dataLabels: 'label', */ 
      // "totalLabel=true" uses the centre of the donut for the total amount 
      totalLabel: true, 
      showDataLabels: true, 
      dataLabels: 'value' 

     } 
    }, 
    grid: { 
     background: 'transparent', 
     borderColor: 'transparent', 
     shadow: false, 
     drawGridLines: false, 
     gridLineColor: 'transparent', 
     borderWidth: '0' 
    }, 
    seriesColors: [ 
     '#57c1b4', '#bd66a9', 
     '#abb3b6' 
    ], 
    negativeSeriesColors: ["#498991", "#C08840", "#9F9274"], 
    highlighter: { 
     show: true, 
     useAxesFormatters: false, 
     tooltipAxes: 'xy', 
     formatString: '%s:%s' 
    } 


}); 

の私のjqueryのコードは私のJSPコードが

<div id="finalScorepercent" style="height: 200px; width: 200px;"> 
<script type="text/javascript" src="<c:url value="/views/js/external.js">">          
</script> 
</div> 

答えて

0

${finalscorepercent}されているこの問題に起因ですJSTLステートメントでは、JavaScriptファイルにNumberとしてレンダリングされないため、コードは機能しません。

あなたは、

<div id="finalScorepercent" style="height: 200px; width: 200px;"> 
<div> 
<script>  
    window.finalScorepercent = ${finalScorepercent}; 
</script> 
<script src="<c:url value="/views/js/external.js">">           
</script> 

HTML external.jsファイルで、external.jsで使用可能なテンプレートファイル内のJavaScript変数を作成することができますwindow.finalScorepercentを代わりに使用することができます${finalScorepercent}

var d1 = window.finalScorepercent; 
var d2 = 100 - window.finalScorepercent; 
+0

nope ..its notinin g –

+0

ブラウザのコンソールに何かエラーがありますか? – Satpal

+0

yes..error:リソースの読み込みに失敗しました:サーバが外部jsファイルのパスの404(Not Found)のステータスで応答しました –

関連する問題