Rails,Highcharts - 从列动态渲染

时间:2016-12-01 21:17:42

标签: javascript ruby-on-rails highcharts

我的表中有一个整数列,其中包含与每条记录关联的数字,我正在尝试将此数字渲染到每条记录的单个条形图上。

<script>
var charts = [],
    $containers = $('#trellis1'),      


$.each(datasets, function(i, dataset) {
    charts.push(new Highcharts.Chart({

        chart: {
            renderTo: $containers[i],
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },

        title: {
            text: null,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
            categories: ['Difficulty'],
            labels: {
                enabled: i === 0
            }
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            min: 0,
            max: 5
        },


        legend: {
            enabled: false
        },

         plotOptions: {
            series: {
                color: '#FF0000'
            }
        },

        series: [{
          <% @homeworks.each do |homework| %>
              data: <%= homework.feedback_request %>;
              <% end %>
            }],

    }));
});
</script>

这是我的表:

    <% @homeworks.where(feedback_request: 1).find_each do |homework| %>
                    <% if homework.school_user.user_id == current_user.id %>
                    <% if current_user.teacher? %>
                    ....
                    <td height="1"><div id="trellis1" class="inline">&emsp;&ensp;</div></td>
    ....
                    </td>
                  </tr>
<% end %>

页面加载但没有在图表的div中呈现。我不需要做任何计算或任何事情。它只是一个整数列,每个记录都有一个数字。如果我硬编码它显示的数据。我的语法好吗?

任何指导?感谢。

更新:

页面源 - 可以看到正在返回的数据

...
        legend: {
            enabled: false
        },

         plotOptions: {
            series: {
                color: '#FF0000'
            }
        },

        series: [{
              data: 1;
              data: 1;
              data: 1;
              data: 1;
            }],

    }));
});

控制器 - 我认为这可能是问题所在。 Kaminari的分页宝石正在弄乱视图,因为我正在使用hansack。它说它的分页为4(因此在源4中返回)但在我看来,我在视觉上只看到两个记录是正确的和我想要的。

def revision_bucket
        @homework = Homework.where(:school_user_id => current_user.id)
        @q = Homework.search(params[:q])
        **@homeworks = @q.result.page(params[:page]).per(4)**
        @q.build_condition if @q.conditions.empty?
        @q.build_sort if @q.sorts.empty?
    end

我想我需要解决这个问题,但我不知道如何解决。可以根据需要提供更多信息。感谢。

更新

我如何解决这个问题:

在控制器......

@interest = Homework.last.homework_students.pluck(:interest).reduce(:+) / Homework.last.homework_students.pluck(:interest).size

与上述表格相同......

在Highcharts JS中:

 <script>
    var charts = [],
        $containers = $('#trellis2'),
         datasets = [{
            data: [<%= @interest %>]}];

    $.each(datasets, function(i, dataset) {
        charts.push(new Highcharts.Chart({

            chart: {
                renderTo: $containers[i],
                type: 'bar',
                marginLeft: i === 0 ? 100 : 10
            },

    ....

            series: [dataset]




}));
});

0 个答案:

没有答案