javascript - Highcharts、ROR、如何让标签发挥作用

Question

我正在尝试让标 checkout 现在我的柱形图上。

JavaScript

<%= javascript_tag do %>
  window.highchartDATA = '<%= @data %>';
<% end %>

仪表板.html.erb

<script>
 $(function () {


        $('#notes_chart').highcharts({
            chart: {
                type: 'column',
                backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [
                [0, '#2a2a2b'],
                [1, '#3e3e40']
         ]
      },

            },
            title: {
                text: 'Total Notes By Class Module'
            },
            subtitle: {
                text: 'Source: Notes Table'
            },
            xAxis: {
                categories: [],
                title: {
                    text: null
                },
                labels: {
                    overflow: 'justify',
                    style: {
                    color: '#FFFFFF',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Number',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify',
                    style: {
                    color: '#FFFFFF',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },

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

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

Controller :notes_controller.rb

def dashboard
    @data = Note.highchart_data
  end

该图表由以下模型填充:

create_table "classmodules", force: :cascade do |t|
    t.integer  "student_id"
    t.string   "subject"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

目前这有效。但是我无法让标 checkout 现在柱形图上。如何让标签自动出现？所有这些都是 1、2、3、4 等等...谢谢!

Answer 1

你可以:

对于数据，我相信您正在传递计数类型的数组。由于它是一维数组，因此 x 轴被视为该数组中的位置。

如果您想要 x 轴上的主题标签，那么您应该传递以下数据格式 [[主题，计数]...]。

参见:http://api.highcharts.com/highcharts#series.data