Rails3でjavascript関数を呼び出す

Question

私は非常に単純なRails2アプリケーションをRGraphからRails3に移植しています。

RGraphのサンプルページからスクリプト機能をコピーしました。

<script> 
    window.onload = function() 
    { 
    var line9 = new RGraph.Line('line9', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25]); 
    line9.Set('chart.background.barcolor1', 'white'); 
    line9.Set('chart.background.barcolor2', 'white'); 
    line9.Set('chart.background.grid', true); 
    line9.Set('chart.linewidth', 5); 
    line9.Set('chart.gutter', 35); 
    line9.Set('chart.hmargin', 5); 
    line9.Set('chart.shadow', true); 
    line9.Set('chart.tickmarks', null); 
    line9.Set('chart.units.post', 'k'); 
    line9.Set('chart.xticks', 8); 
    line9.Set('chart.colors', ['red', 'green', 'blue']); 
    line9.Set('chart.key', ['Sales (not good)']); 
    line9.Set('chart.key.shadow', true); 
    line9.Set('chart.key.rounded', true); 
    line9.Set('chart.xaxispos', 'center'); 
    line9.Set('chart.background.grid.autofit', true); 
    line9.Set('chart.background.grid.autofit.numhlines', 16); 

    // Define a context menu that allows you to toggle the background grid. The two options simply: 
    // 1. Set the appropriate setting on the object 
    // 2. Clear the canvas 
    // 3. Draw the graph again 
    line9.Draw(); 
    } 

    function draw_line() 
    { 
    var line9 = new RGraph.Line('line8', [56,45,43,52,56,65,21,23,34,15,21,-12,-13,-31,-25]); 
    line9.Set('chart.background.barcolor1', 'white'); 
    line9.Set('chart.background.barcolor2', 'white'); 
    line9.Set('chart.background.grid', true); 
    line9.Set('chart.linewidth', 5); 
    line9.Set('chart.gutter', 35); 
    line9.Set('chart.hmargin', 5); 
    line9.Set('chart.shadow', true); 
    line9.Set('chart.tickmarks', null); 
    line9.Set('chart.units.post', 'k'); 
    line9.Set('chart.xticks', 8); 
    line9.Set('chart.colors', ['red', 'green', 'blue']); 
    line9.Set('chart.key', ['Sales (not good)']); 
    line9.Set('chart.key.shadow', true); 
    line9.Set('chart.key.rounded', true); 
    line9.Set('chart.xaxispos', 'center'); 
    line9.Set('chart.background.grid.autofit', true); 
    line9.Set('chart.background.grid.autofit.numhlines', 16); 

    // Define a context menu that allows you to toggle the background grid. The two options simply: 
    // 1. Set the appropriate setting on the object 
    // 2. Clear the canvas 
    // 3. Draw the graph again 
    line9.Draw(); 
    } 

    draw_line(); // call here !!! 
</script> 

...とキャンバスタグページの一番下

<canvas id="line8" width="475" height="350">[Please wait...]</canvas> 
<canvas id="line9" width="475" height="350">[Please wait...]</canvas> 

で）ラインチャートline9は大丈夫ですが、line8私はDRAW_LINE（と呼ばれたにも関わらず、目に見えないです。スクリプトタグ内これをRails2でテストすると、どちらも問題なく動作します。

どういうところが間違っていますか？

これらはページのJavaScriptリンクです。

<script src="/javascripts/prototype.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/effects.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/dragdrop.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/controls.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/rails.js?1290397238" type="text/javascript"></script> 
<script src="/javascripts/application.js?1290397238" type="text/javascript"></script> 

<!-- RGraph --> 
<script src="/javascripts/rgraph/RGraph.common.core.js?1288418842" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.context.js?1288083348" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.annotate.js?1284451808" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.tooltips.js?1284725300" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.zoom.js?1284020392" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.common.resizing.js?1284451808" type="text/javascript"></script> 
<script src="/javascripts/rgraph/RGraph.line.js?1288418842" type="text/javascript"></script> 

Answer 1

あなたはdraw_line（）を移動する必要があります。 in window.onload

<script> 
    window.onload = function() 
    { 
    # line9 stuff 

    draw_line(); 
    } 

    function draw_line() 
    { 
    # line8 stuff 
    } 
</script> 

あなたのHTMLをすべて読み終え​​る前に、あなたのjavascriptを読み込んで実行します。

（その理由から、レンダリングの最後に呼び出されるwindow.onloadに呼び出しを入れる必要があります）