3

私はrailscastsの第223章（チャート）に従っていて、 Highchartsライブラリ を使用してアプリケーションに「ドーナツ」スタイルを実装しようとしていました。私は今、それらが別の内部の1つの「パイ」シリーズであり、それぞれが独自のデータソースを持っていることを知っています。

ただし、例を希望どおりに調整しようとすると、目的の結果が得られませんでした。グラフの「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' }      
           ]             
       }
      ]

もう1つの方法は、データを次のように渡すことです。

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>

その構文"&quot; **** &quot;"がここで混乱しているのでしょうか？._data配列を再確認したところ、そのように入力されています。問題は、データの取得方法に関係している可能性がありますか？

4

1 に答える 1

3

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%>                   
 ]
于 2011-05-26T08:17:44.823 に答える