图表上使用highcharts

问题描述：

我下面chapter 223 (charts) of the railscasts轨道3，并且正在努力实现使用Highcharts library应用程序中的“甜甜圈”的风格。我现在知道，他们只是一个“馅饼”内的另一个系列，并拥有自己的数据源，他们中的每一个。图表上使用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%>

馅饼没有ploting.So我希望在这个问题上的任何帮助

编辑语言（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数组，它是如何填充的。也许这个问题关系到我如何检索数据？

什么是生成的JavaScript源看起来像Rails代码运行后？ – NT3RP 2011-05-18 13:15:16

@ NT3RP-I在输出 – Daniel 2011-05-18 21:24:36

答

我想你在HTML得到的仅仅是不是一个有效的JavaScript代码，而不是解释。请尝试以下操作：

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

原始指令应该删除你看到了引号& QUOT HTML代码。

如果这没有帮助，你可以检查使用浏览器扩展是否有任何JavaScript错误？对于谷歌浏览器，你可以去工具 - >开发人员工具，看看你是否在你的网页有任何JS错误。

编辑：您可能还需要标记“d”为html_safe，这样的：

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

中添加了一个“编辑”部分！当使用html_safe不起作用时，导致我的d变量没有html_safe方法（它只适用于字符串变量AFAIK）。但是谢谢花时间。现在它绘制结果！ – Daniel 2011-06-01 12:59:54

啊，是的，你说得对，好点！ – Svilen 2011-06-01 13:51:57

图表上使用highcharts

相关推荐