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

Question

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

目前图表的工作原理是它呈现数据，但 x 轴标签显示 0、1、2、3 等，这是没有任何内容可呈现时的默认值。

笔记 Controller :

def dashboard
  @data = Note.getData()
end

注意.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 %>
          }]...

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

注意.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

仪表板.html.erb:

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

谢谢。我真的很感激这里的任何帮助。

Answer 1

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

据我了解，您想将每个 subject_type 显示为 系列名称。

如果 No 试试这个

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

如果是试试这个

Highcharts series object 是一个数组，这意味着它可以包含多个系列。 name 属性为系列命名。 data 属性表示系列值。

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

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 和该 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>"
}

希望对您有所帮助。