Rails和Chart.js

我正在尝试在Chart.js中获取条形图，以处理来自Rails应用程序的数据。我需要找到一种从Charts.js想要的格式从Rails数据库检索数据的方法。http://www.chartjs.org/docs/latest

Chart.js给出了使用data: [12, 19, 3, 5, 2, 3]和的示例labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]

所以我可以在控制器中做这样的事情

@data = [10, 9, 3, 5, 2, 3]
@color_labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
@labels = []  
@color_labels.each do |c_label|
    @labels.push(c_label)
end

那么如果我添加了<%= @data.to_json.html_safe %>，<%= @labels.to_json.html_safe %>就可以将数据\标签从控制器传递到视图。

但是我真正想做的是从数据库中动态提取数据和数据标签。

因此，如果我尝试获取每月创建的图书数量

# num of books created per month
@books_count = Book.group_by_month(:created_at).count

它将具有此输出，{Sun, 01 Jul 2018=>12, Wed, 01 Aug 2018=>10, Sat, 01 Sep 2018=>9, Mon, 01 Oct 2018=>4}我不确定如何将其设置为具有“每月书数”数组和具有月名称的“标签数组”的正确格式。

在我看来

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: <%= @labels.to_json.html_safe %>,
        datasets: [{
            label: '# of Votes',
            data: <%= @data.to_json.html_safe %>,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>