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文件中。

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

那么获取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放在文件中，并使用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
  });    
});

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

1 个答案: