Rails 收集 JSON 数据并将其渲染到 Highcharts 图表中

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

目前，图表的工作方式是渲染数据，但 x 轴标签显示 0、1、2、3...等，这是没有任何可渲染内容时的默认值。

注释_控制器：

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

仪表板.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

（我可能这样做完全错误！）

注释_控制器.rb：

def subject
    @subject = Note.getSubjects()
end

仪表板.html.erb：

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

谢谢。任何帮助我都会非常感激。

为什么你想打印subject_type in x-axis ? The axes图表通常用于测量。轴可以是线性轴、对数轴、日期时间轴或类别轴。

根据我的理解，你想展示每个subject_type as a series name.

If No尝试这个

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

If Yes尝试这个

高图系列 http://www.highcharts.com/docs/chart-concepts/seriesobject 是一个数组，这意味着它可以包含多个系列。这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。你只需要找出uniqsubject_type从而成为name of the series和总数subject_type从而成为data of the 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

In your 仪表板.html.erb

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

正如我在上面看到的，您还需要图表title。你可以用这种方式来做。

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

我希望这会有所帮助。