使用Highcharts在Rails 3上制作图表

Question

使用Highcharts在Rails 3上制作图表

3

我正在跟随Railscasts的第223章（图表），并尝试使用Highcharts库为应用程序实现“甜甜圈”样式。现在我知道它们只是一个“饼”系列嵌套在另一个系列中，并且每个系列都有自己的数据源。

然而，当我尝试将示例调整到所需结果时，我无法得到所需的结果。我想知道将数据传递给图表的“data”参数的正确方法是什么？

因此，我从互联网上复制了下面的代码（仅供测试）：

      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: [                
         <%_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>

这个语法 "" **** "" 会不会是导致问题的原因？我重新检查了 _data 数组，它就是这样填充的。也许问题与我检索数据的方式有关？

- Daniel

那个 Rails 代码运行后生成的 JavaScript 源代码是什么样子的？ - NT3RP

@NT3RP-我添加了一个“编辑”部分，其中包含输出。 - Daniel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Svilen · Accepted Answer

我认为你在HTML中得到的只是无效的JavaScript代码，无法解释。请尝试以下操作:

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

raw指令应该可以去除你看到的引号的html代码。

如果这不能解决问题，你可以使用浏览器扩展检查是否有任何javascript错误。对于Google Chrome，你可以到工具->开发者工具，查看页面中是否有任何js错误。

编辑：你可能还需要将'd'标记为html_safe，像这样:

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