使用高图表的轨道 3 上的图表

我正在遵循 railscast 的第 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.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数组，这就是它的填充方式。也许问题与我如何检索数据有关？

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

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

原始指令应删除您看到的引号的 " html 代码。

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

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

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

相关内容

最新更新

热门标签：