在 Rails 中获取 Highcharts 数据的正确方法是什么

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 提供给图表。最简单的方法是在html.erb 文件中包含JavaScript，并通过<%= @names %> 和<%= @ages %> 提供数据。不过不推荐，我想把JavaScript代码放在assets/javascripts/students.js文件里。

在 JavaScript 文件中获取数据的一种非常常见的方法是使用 Ajax，但是，我的数据已经在页面中，所以我不想在控制器中添加额外的操作来发送数据。

那么获取 Highcharts 数据的最佳做法是什么？ data- 属性？

项目中没有前端框架，只有jQuery。我知道一些 gem 可以帮助我，例如 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（无需添加e新动作）：

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

然后将javascript放在一个文件中，并使用jQuery.getJSON()获取json数据：

$.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
  });    
});