3

我正在关注railscasts 的第 223 章（图表）， 并试图使用Highcharts 库为应用程序实现“甜甜圈”样式。我现在知道它们只是另一个内部的一个“馅饼”系列，每个系列都有自己的数据源。

虽然，当尝试将示例调整为我想要的结果时，我无法获得所需的结果。我想知道哪种是将数据传递给图表的“数据”参数的正确方法？

所以我从互联网上复制了下一个代码（仅用于测试）：

      series: [       
      {
        type: 'pie',
        name: '2008',
        size: '45%',
        innerSize: '20%',
        data: [
            { name: 'Firefox', y: 45.0, color: '#4572A7' },
            { name: 'IE', y: 26.8, color: '#AA4643' },
            { name: 'Chrome', y: 12.8, color: '#89A54E' },
            { name: 'Safari', y: 8.5, color: '#80699B' },
            { name: 'Opera', y: 6.2, color: '#3D96AE' },
            { name: 'Mozilla', y: 0.2, color: '#DB843D' }      
           ]             
       }
      ]

另一种方法是将数据传递为：

series: [       
       {
        type: 'pie',
        name: '2008',
        size: '45%',
        innerSize: '20%',
 data: [
        ['IE', 46.6],
        ['Chrome',  3.1], 
        ['Safari',  2.7], 
        ['Opera',  2.3],
        ['Mozilla', 0.4]           
     ]
   }]

如您所见，我使用的数据是静态的。如果我想使用数据库中的信息怎么办？. 所以，因为我有几个模型：

class Frame < ActiveRecord::Base       class FrString < ActiveRecord::Base
  attr_accessible :name, :total           attr_accessible :frame_id,:name,:total

   has_many :fr_strings                   belongs_to :frame
end                                    end

我虽然创建一个数组数组以最终将其用作我的图表的数据源将是一个好主意......显然不是那么好。

<% _data=[] %>
<%Frame.all.each do |frame|%>
   <% _data  << [frame.name,frame.fr_strings.sum(:total)]%>
<%end%>

馅饼没有阴谋。所以我希望能在这件事上提供任何帮助

编辑（Javascript 输出）

当我将“数据”参数传递为：

  data: [                
         <%_data.each do |d|%>
            <%=d%>,
          <%end%>                   
     ]

它给了我：

 <!DOCTYPE html> 
  <html> 
    <head> 
     <title>Charts</title> 
      <link href="/stylesheets/application.css?1305016385" media="screen" rel="stylesheet" type="text/css" /> 
     <script src="/javascripts/application.js?1304963001" type="text/javascript">       </script> 
  <script src="/javascripts/jquery-1.4.2.min.js?1305020819" type="text/javascript"></script> 
  <script src="/javascripts/rails.js?1305020831" type="text/javascript"></script> 
  <script src="/javascripts/highcharts.js?1305029094" type="text/javascript"></script> 

  <meta name="csrf-param" content="authenticity_token"/> 
  <meta name="csrf-token" content="G4k7DrZNfIcJt4Dlbz7JzNViSjQ+OGPUAVY4rW+XAxY="/> 
  </head> 
<body> 
       <script type="text/javascript" charset='utf-8'> 
           $(function(){
         new Highcharts.Chart({         
           chart: {
          renderTo: 'frames_chart',
          margin: [50, 0, 0, 0],
          plotBackgroundColor: 'none',
          plotBorderWidth: 0,
          plotShadow: false            
       },
       title: {
          text: 'CHART TITLE'
       },
        subtitle: {
          text: 'Inner circle: 2008, outer circle: 2010'
       },
       tooltip: {
          formatter: function() {
             return '<b>'+ this.series.name +'</b><br/>'+ 
                this.point.name +': '+ this.y +' %';
          }
       },
        series: [      
        {
          type: 'pie',
          name: '2008',
          size: '60%',
          innerSize: '10%',
          data: [
               [&quot;Car&quot;, 93.0]
               [&quot;House&quot;, 91.0]
          ],
          dataLabels: {
            enabled: false
             }
          },           
        ]
     });
  });
</script> 

     <div id="frames_chart" style="width:560px; height:300px"></div> 

 </body> 
</html>

该语法"&quot; **** &quot;"可能是这里的问题吗？我重新检查了 _data 数组，这就是它的填充方式。也许问题与我如何检索数据有关？

4

1 回答 1

3

我认为你在 html 中得到的不是有效的 JavaScript 代码，也没有被解释。尝试以下操作：

 data: [                
     <%_data.each do |d|%>
        <%=raw d %>,
      <%end%>                   
 ]

raw 指令应该删除你看到的引号的 " html 代码。

如果这没有帮助，您能否使用浏览器扩展检查是否有任何 javascript 错误？对于谷歌浏览器，你可以去工具 -> 开发者工具，看看你的页面是否有任何 js 错误。

编辑：您可能还需要将“d”标记为 html_safe，如下所示：

 data: [                
     <%_data.each do |d|%>
        <%=raw d.html_safe %>,
      <%end%>                   
 ]
于 2011-05-26T08:17:44.823 回答