在Rails3中调用javascript函数

我正在使用RGraph将非常简单的Rails2应用程序移植到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>

window.onload=函数（）
{
var line9=新的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'）；
行9.Set（'chart.background.grid'，true）；
line9.Set（'图表线宽'，5）；
第9行。集合（'图。槽'，35）；
第9行。集合（'chart.hmargin'，5）；
行9.Set（'chart.shadow'，true）；
行9.Set（'chart.tickmarks'，null）；
行9.Set（'chart.units.post'，'k'）；
行9.Set（'chart.xticks'，8）；
行9.Set（'chart.colors'，['red'，'green'，'blue']）；
行9.Set（'chart.key'，['Sales（not good）'）；
行9.Set（'chart.key.shadow'，true）；
行9.Set（'chart.key.rounded'，true）；
行9.Set（'chart.xaxispos'，'center'）；
行9.Set（'chart.background.grid.autofit'，true）；
行9.Set（'chart.background.grid.autofit.numhlines'，16）；
//定义一个上下文菜单，允许您切换背景网格。这两个选项很简单：
//1.在对象上设置适当的设置
//2.清理画布
//3.再画一次图表
第9行。Draw（）；
}
函数绘制线（）
{
var line9=新的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'）；
行9.Set（'chart.background.grid'，true）；
line9.Set（'图表线宽'，5）；
第9行。集合（'图。槽'，35）；
第9行。集合（'chart.hmargin'，5）；
行9.Set（'chart.shadow'，true）；
行9.Set（'chart.tickmarks'，null）；
行9.Set（'chart.units.post'，'k'）；
行9.Set（'chart.xticks'，8）；
行9.Set（'chart.colors'，['red'，'green'，'blue']）；
行9.Set（'chart.key'，['Sales（not good）'）；
行9.Set（'chart.key.shadow'，true）；
行9.Set（'chart.key.rounded'，true）；
行9.Set（'chart.xaxispos'，'center'）；
行9.Set（'chart.background.grid.autofit'，true）；
行9.Set（'chart.background.grid.autofit.numhlines'，16）；
//定义一个上下文菜单，允许您切换背景网格。这两个选项很简单：
//1.在对象上设置适当的设置
//2.清理画布
//3.再画一次图表
第9行。Draw（）；
}
绘制线（）；//在这里打电话！！！

…和页面底部的画布标记

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

您需要移动绘制线（）；在window.onload中

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

    draw_line();
  }

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

window.onload=函数（）
{
#第九行的东西
画线（）；
}
函数绘制线（）
{
#第八行的东西
}

因为它在读取所有html之前读取并执行javascript

（因此，需要将调用放入渲染结束时调用的window.onload中）