Highcharts,ROR,如何使标签工作

时间:2015-12-02 01:46:01

标签: javascript ruby-on-rails highcharts

我正在尝试在我的柱形图上显示标签。

的JavaScript

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

dashboard.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>

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

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

目前这有效。但是我无法让标签显示在柱形图上。如何让标签自动显示?所有这些都是1,2,3,4等....谢谢!

1 个答案:

答案 0 :(得分:1)

你可以:

对于数据,我相信你传递了一个类型计数数组。由于它是一维数组,因此x轴被视为该数组中的位置。

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

请参阅:http://api.highcharts.com/highcharts#series.data