jquery - Rails 为 .each do |x| 生成图表使用 highcharts 或任何其他图表 API

Question

我正在使用 Highcharts JS 来显示公司 ATM 的表格。

我在一页中显示公司列表:

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

我尝试渲染一张图表，然后将

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

在里面

.each do |company|

仅生成第一个图表，我假设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/apple/microsoft 的公司现在可以正确显示。 但这是硬编码的，如何让这部分自动根据数据库中的数据进行判断，而不是我编码 => "twitter"，并手动多次编写 .renderChart() ？

谢谢

Answer 1

您不能对同一文档中的多个元素使用相同的id。这是 (X)HTML 规范，没有办法绕过它。

正如您所发现的，解决方案是为每个元素使用不同的 id (Highcharts 似乎不支持使用类选择器代替 id) 。这在 Rails 中很容易完成。例如:

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