Rails爲.each do | x |生成圖表使用高圖或任何其他圖表API

我使用Highcharts JS來顯示公司的ATM表。Rails爲.each do | x |生成圖表使用高圖或任何其他圖表API

我在一個頁面顯示公司的名單：

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

我試圖呈現一個圖表，並把

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

在側

.each do |company|

只有第一個c哈特生成，我假設renderChart()只能工作一次，所以如果我把<DIV ID="someid" >多次，只有第一個工作。

我該如何解決這個問題？

我發現一個例子來顯示多個圖表，http://jsfiddle.net/pebch/ 但即使有上面的例子中，它必須做手工renderChart（）三次，每次與不同的ID

如何自動做到這一點使用數據庫中的數據？

在此先感謝

編輯：謝謝喬丹！

所以我現在

<% @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（）多次手動？

感謝

來源

2011-10-20 qiaqiac

你能告訴我們的代碼？它會更容易幫助你。 – damienbrz

不能使用同一個文檔中的多個元素相同id。這是（X）HTML規範，沒有辦法繞過它。

正如您發現的，解決方案是爲每個元素使用不同的id（Highcharts似乎不支持使用類選擇器而不是id）。這很容易在Rails中完成。例如：

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

來源

2011-10-20 05:02:18

也需要在Javascript中通過新的id container_xxx實例化每個圖表。 –

幫了很多！謝謝 – qiaqiac

你應該做這樣的事情：

$(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 %>

來源

2011-10-20 06:45:57 damienbrz

這解決了我的問題！非常感謝！！ – qiaqiac

Rails爲.each do | x |生成圖表使用高圖或任何其他圖表API

回答

相關問題