Rails收集JSON数据并将其呈现到Highcharts图中

Question

我正在尝试将标签传递到x轴的Highcharts柱形图中。

当前该图表的工作方式是渲染数据，但x轴标签显示0、1、2、3 ... etc，这是无渲染时的默认设置。

notes_controller：

def dashboard
  @data = Note.getData()
end

note.rb

def self.getData
    data = []
    self.subject_types.each do |type|
      data << self.type_count(type)
    end
    data
  end

private

  def self.subject_types
    pluck(:subject_type).uniq
  end

  def self.type_count(type)
    where(subject_type: type).count
  end
end

dashboard.html.erb javascript

...series: [{
           name: 'Number of Notes By Class Module',
           data: <%= @data %>
          }]...

上面的作品很棒，但是如何显示标签？ 它们应该来自我表中名为subject_type的列。 我尝试了以下方法：

note.rb：

def self.getSubjects
    respond_to do |format|
    render :json => @note.to_json(:only => [:subject_type])
end

（我可能完全错了！）

notes_controller.rb：

def subject
    @subject = Note.getSubjects()
end

dashboard.html.erb：

...series: [{
               name: 'Number of Notes By Class Module',
               data: <%= @data %>, <%= @subject %>
              }]...

谢谢。 这里的任何帮助我将非常感谢。

Answer 1

为什么要在x-axis打印subject_type ？ 图表的axes通常用于测量。 轴可以是线性，对数，日期时间或类别。

根据我的理解，您希望将每个subject_type显示为series name 。

如果No尝试

xAxis: {
    categories: '<%=raw @subjects.to_json %>'
}

如果Yes尝试此

Highcharts系列对象是一个数组，表示它可以包含多个系列。 name属性为系列命名。 data属性表示序列值。

这意味着我们的series必须是这样的。

series: [ 
          {name: 'Subject Type 1', data: [5] }, 
          {name: 'Subject Type 2', data: [6] }, 
          {name: 'Subject Type n', data: [n] }, 
        ]

您有一个Note表，其中包含subject_type列。 每个note必须包含subject_type 。 你只需要找出uniq的subject_type是成为name中的series和的总数subject_type是成为data中的series 。

您可以这样做：

def dashboard
  @series_data = []
  @notes = Note.select("id, subject_type, COUNT(*) AS total").group("id, subject_type")
  # Collect series data that will be show
  @notes.group_by(&:subject_type).each do |k, v|
    @series_data << { name: k.titleize, data: [v.size] }   
  end
end

在您的dashboard.html.erb中

series: <%=raw @series_data.to_json %>

正如我在上面看到的，您还需要图表title 。 您可以通过这种方式进行。

title: {
  text: "<strong>Number of Notes By Class Module</strong>"
}

我希望这会有所帮助。

Answer 2

尝试这个：

首先，我们将使用您当前的类方法来获取subject_types数组：

def dashboard
  @data = Note.getData()
  @subjects = Note.subject_types
end

然后，按照Highchats 示例 ， xAxis: categories json键是我们需要放置subjects标签数组的位置：

$('#container').highcharts({
  chart: {
    type: 'line'
  },

  //other options ...

  xAxis: {
    categories: <%= @subjects %>
  },

  series: [{
     name: 'Number of Notes By Class Module',
     data: <%= @data %>
  }]
});