如何在rails中包含flotr2图表？

我试图在视图中包含图表，但它不起作用。有人可以帮忙吗？如何在rails中包含flotr2图表？

这就是我在视图（flotr2.min.js公共/ JavaScript的）：

... 
<div id="container"> 
    <!--[if lt IE 9]> 
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js">  </script> 
    <![endif]--> 
    <%= javascript_include_tag "flotr2.min.js" %> 
    <script type="text/javascript"> 

    (function() { 
     var d1 = [ 
     [1, 10], [2, 8], [3, 5],[4, 13]], 
    d2 = [[1,12],[2,12],[3,12],[4,12],[5, 12]] 

    graph = Flotr.draw(container, [{data: d1, label: "Test"}, {data: d2, lines:{show: true}, points: {show: true}}], { 
mode: 'time', 
    xaxis: { 
    ticks: [[1, "Jan"],[2, "Feb"], [3, "Mrz"], [4, "Apr"], [5, "Mai"], [6, "Jun"], 
       [7, "Jul"],[8, "Aug"], [9, "Sep"], [10, "Okt"], [11, "Nov"], [12, "Dez"]]  

    }, 
    grid: { 
     minorVerticalLines: true, 
    backgroundColor: 'white' 
    } 
    }); 
})(); 
</script> 

</div>

来源

2012-02-23 Peterb

您可能需要解决您的容器大小，尝试在你的头上有这种风格：

<style type="text/css"> 
    #container { 
    width : 600px; 
    height: 384px; 
    margin: 8px auto; 
    } 
</style>

我也发现github上的当前版本不工作。尝试www.humblesoftware.com/static/js/flotr2.min.js

来源

2012-02-23 22:18:31 Steven

试图改变容器大小，但它仍然无法正常工作。如果我在'独立'html文件中使用js文件，则会绘制图表。因此，flotr2.min.js本身应该没问题。 – Peterb 2012-02-24 19:25:23

flotr2.min.js是否包含在您的ruby应用程序的head标签中？ – Steven 2012-02-27 01:36:04

是的，我试过两种选择。首先，我在视图文件中包含了<％= javascript_include_tag“flotr2.min.js”％>，然后尝试将它包含在应用程序布局文件中。难道说标准原型JavaScript库有一些问题吗？也许是 – Peterb 2012-02-27 08:13:00

您的脚本中缺少容器变量。在头部加入flotr2.min.js。容器必须有积极的宽度：

<div id="container" style="height: 420px; width: 100%;"></div>

试试看这样的：

<script type="text/javascript"> 
    var container = document.getElementById('container'), 
    d1 = [[1, 10], [2, 8], [3, 5],[4, 13]], 
    d2 = [[1,12],[2,12],[3,12],[4,12],[5, 12]]; 

     Flotr.draw(container, [{data: d1, label: "Test"}, {data: d2, lines:{show: true}, points: {show: true}}], 
    {mode: 'time', 
     xaxis: { 
     ticks: [[1, "Jan"],[2, "Feb"], [3, "Mrz"], [4, "Apr"], [5, "Mai"], [6, "Jun"], 
        [7, "Jul"],[8, "Aug"], [9, "Sep"], [10, "Okt"], [11, "Nov"], [12, "Dez"]]  
     }, 
     grid: { 
      minorVerticalLines: true, 
     backgroundColor: 'white' 
     } 
     }); 
    </script>

来源

2013-01-14 10:40:04 Kuba

如何在rails中包含flotr2图表？

回答

相关问题