在Rails中獲取Highcharts數據的正確方法是什么

Question

My 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放在文件中，並使用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 }); });