Railsは.each do | x |ハイチャートやその他のチャートAPIを使用して

Question

私は会社のATMのテーブルを表示するためにハイチャートJSを使用しています。

私は1つのページに企業のリストを表示しています：

<% @companies.each do |company| %> 

私は1つのグラフを描画し、サイド

.each do |company|をして

<div id="someid" ...> </div>

を入れてみました

最初のcハートが生成され、私はrenderChart()が1回しか動作しないと仮定しているので、<DIV ID="someid" >を複数回入力すると、最初のものだけが動作しています。

この問題を解決するにはどうすればよいですか？

私はhttp://jsfiddle.net/pebch/ それでも上記の例で、それが持っている、複数のチャートを表示する例を見つけたの手動renderChart（）3回、それぞれが異なるIDのである操作を行う

これを自動的に行う方法データベースのデータを使用していますか？事前に

おかげ

EDIT：感謝ジョーダン！

ので、今、私は

<% @companies.each do |company| %> 
    <div id="staffchart-<%= company.permalink %>" ...></div> 
<% end %> 

と私のHighchartsのJSにを持って、私は/マイクロソフトが正しく表示される名前のさえずり/リンゴとそう

<script type="text/javascript"> 
var charts = new Array; 
jQuery.fn.renderChart = function(attr) { 
    i = charts.length; 
    var chart = charts[i] = new Highcharts.Chart({ 
    chart: { 
     renderTo: $(this).attr('id'), 
    }, 
    series: attr.series, 
    }); 

} 
$(document).ready(function(){ 
     $('#staffchart-microsoft').renderChart({ 
      series: [{ 
      type: 'spline', 
      name: 'Random data1', 
      data: [<% StaffLevel.where(:company_permalink => "microsoft").each do |staff_level| %> 
       [Date.UTC(<%= staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>], 
      <% end %>], 
      }], 
     }); 

     $('#staffchart-apple').renderChart({ 
      series: [{ 
      type: 'spline', 
      name: 'Random data2', 
      data: [<% StaffLevel.where(:company_permalink => "apple").each do |staff_level| %> 
       [Date.UTC(<%= staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>], 
      <% end %>], 
      }], 
     }); 

     $('#staffchart-twitter').renderChart({ 
      series: [{ 
      type: 'spline', 
      name: 'Random data3', 
      data: [<% StaffLevel.where(:company_permalink => "twitter").each do |staff_level| %> 
       [Date.UTC(<%= staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>], 
      <% end %>], 
      }], 
     }); 

会社を持っています。 それはハードコード化されていますが、このセクションを自動的にデータベースからのデータで判断するのではなく、 "twitter"というコードではなく、.renderChart（）を手動で何度も書きますか？

おかげ

Answer 1

あなたは、同じドキュメント内の複数の要素に同じid使用することはできません。これは（X）HTML仕様であり、その周りには何もありません。

解決策は、各要素に異なるidを使用することです（Highchartsはidではなくクラスセレクタの使用をサポートしていないようです）。これはRailsで達成するのは簡単です。たとえば：

<% @companies.each do |company| %> 
    <div id="container_<%= company.id %>" ...></div> 
<% end %> 

Answer 2

あなたはそのような何かを行う必要があります。

$(document).ready(function(){ 
    <% @companies.each do |company| %> 
    $("#staffchart-<%= company.permalink %>").renderChart({ 
     series: [{ 
     type: 'spline', 
     name: 'Random data1', 
     data: [<% StaffLevel.where(:company_permalink => company.permalink).each do |staff_level| %> 
      [Date.UTC(<%= staff_level.created_at.strftime("%Y,%m,%d") %>), <%= staff_level.number_of_employees %>], 
     <% end %>], 
     }], 
    }); 
    <% end %>