Rails и Chart.js

Question

Я пытаюсь получить гистограмму в Chart.js для работы с данными из приложения Rails.Мне нужно найти способ извлечь данные из базы данных Rails в формате, который хочет Chart.js.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>

Answer 1

Я не уверен, как поставить это в правильном формате, имеющем массив «счетчиков книг в месяц» и «массив меток» с названиями месяцев.

Глядя на group_by_month, становится ясно, что вы используете groupdate драгоценный камень.Позволяет использовать опцию format для возврата только названий месяцев как keys, как показано ниже

@books_count = Book.group_by_month(:created_at, format: "%b").count

, которые будут возвращать результаты, подобные этому

{"Jul" =>12, "Aug" =>10, "Sep" =>9, "Oct" =>4}

Теперь, выполнив @books_count.keys и @books_count.values, вы получите следующие значения:

@books_count.keys
#=> ["Jul", "Aug", "Sep", "Oct"]

@books_count.values
#=> [12, 10, 9, 4]

Так что теперь вы можете, наконец, передать их уважаемым labels и data, как показано ниже

labels: <%= @books_count.keys.to_json.html_safe %>
data: <%= @books_count.values.to_json.html_safe %>