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

Question

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

目前图表的工作原理是渲染数据，但 x 轴标签显示 0,1,2,3...等，这是没有要渲染的默认值。

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 series 对象是一个数组，意味着它可以包含多个系列。 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。您只需要找出成为series 的name 的uniq subject_type 以及成为series 的data 的subject_type 的总数。

你可以这样做：

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 example 之后，xAxis: categories json 键是我们需要放置标签 subjects 数组的地方：

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

  //other options ...

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

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