Rails генерирует диаграмму для .each do | x |используя highcharts или любой другой API диаграммы - PullRequest
Новая
       9

Rails генерирует диаграмму для .each do | x |используя highcharts или любой другой API диаграммы

2 голосов
/ 20 октября 2011

Я использую Highcharts JS для отображения таблиц компаний ATM.

Я отображаю список компаний на одной странице: 

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

Я пытался отобразить одну диаграмму,и поместите

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

в сторону

.each do |company|

ТОЛЬКО при создании первого графика, я предполагаю, что renderChart() работает только один раз, поэтому, если я поставлю <DIV ID="someid" > несколько раз, будет работать только первый.

как мне решить эту проблему?

Я нашел пример отображения несколькихдиаграммы, http://jsfiddle.net/pebch/, но даже с приведенным выше примером, он должен вручную выполнить renderChart () три раза, и каждый с разными идентификаторами

Как это сделать автоматически, используя данные из базы данных?

Заранее спасибо

РЕДАКТИРОВАТЬ: спасибо Джордан!

так что теперь у меня есть 

<% @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 теперь отображаются корректно.но это жестко запрограммировано, как сделать этот раздел автоматически, судя по данным из базы данных, вместо меня coding => "twitter" и много раз вручную писать .renderChart ()?

Спасибо

Ответы [ 2 ]

3 голосов
/ 20 октября 2011

Нельзя использовать один и тот же id для нескольких элементов в одном документе. Это - (X) HTML-спецификация, и нет пути к ней.

Решение, как вы обнаружили, состоит в том, чтобы использовать разные id для каждого элемента (кажется, Highcharts не поддерживает использование селектора класса вместо id). Это достаточно просто сделать в Rails. Например: 

<% @companies.each do |company| %>
  <div id="container_<%= company.id %>" ...></div>
<% end %>
1 голос
/ 20 октября 2011

Вы должны сделать что-то подобное: 

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