我正在尝试将标签传递到 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 %> 
              }]... 

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

请您参考如下方法:

为什么要在 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>" 
} 

希望对您有所帮助。