Как правильно получить данные для Highcharts в Rails?

Question

На моем сайте Rails отображается простая таблица с именами и возрастом студентов.

name  age
Lily  25
Tom   27
Chris 19
...

Итак, у меня есть @names = Student.pluck(:name), @ages = Student.pluck(:age).Теперь я хотел бы сгенерировать линейный график с использованием Highcharts:

HTML: <div id='students-chart'></div>

JavaScript:

$(function() {
  Highcharts.chart('students_chart', {
    ...
  };
};

Теперь я должен указать имя и возраст на графике как xAxis и yAxis.Самый простой способ - включить JavaScript в файл html.erb и предоставить данные по <%= @names %> и <%= @ages %>.Однако это не рекомендуется, и я хочу поместить код JavaScript в файл assets/javascripts/students.js.

Очень распространенный способ получения данных в файле JavaScript - использование Ajax, однако мои данные ужена странице, поэтому я не хочу добавлять в контроллер дополнительное действие для отправки данных.

Итак, каков наилучший способ получения данных для Highcharts? data-атрибут?

В проекте нет интерфейсных платформ, только jQuery.Я знаю, что некоторые драгоценные камни могут помочь мне, например, Chartkick или LazyHighCharts, но я хотел бы знать основную стратегию.

Answer 1

Это один из способов показать диаграмму, просто jQuery получает данные из контроллера.

В контроллере получить данные, настроить и преобразовать в json. Настройте уважение к своим моделям. Вот пример с массивом хэшей (данные передаются в виде массивов):

@series = [ {name: 'Lily', data: [25]}, {name: 'Tom', data: [27]}, {name: 'Chris', data: [19]} ].to_json

Например, если ваша модель User включает столбец возраста, вы можете настроить ее следующим образом:

@series = User.all.map{ |user| {name: user.name, data: [user.age]} }.to_json

В поле зрения (настраивайте как хотите), передавая переменную здесь:

<div id='students_chart'></div>
<script>
  $(function () { 
    var myChart = Highcharts.chart('students_chart', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'User ages'
        },
        xAxis: {
            categories: ['Users']
        },
        yAxis: {
            title: {
                text: 'Age'
            }
        },
        series: <%= raw @series %>
    });
});
</script>

---

Редактировать - получить данные с сервера

Вместо отправки данных для просмотра, визуализируйте как json (не нужно добавлять новое действие):

respond_to do |format|
  format.html
  format.json { render json: @series }
end

Затем поместите JavaScript в файл и получите данные JSON, используя jQuery.getJSON():

$.getJSON(window.location.href, function(json) {
  var highChartData = json;
  console.log(json)
  var myChart = Highcharts.chart('students_chart', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'User ages'
    },
    xAxis: {
      categories: ['Users']
    },
    yAxis: {
      title: {
      text: 'Age'
      }
    },
    series: highChartData
  });    
});