Highcharts,ROR,如何让标签发挥作用

Highcharts, ROR, how to get labels working

本文关键字:作用 标签 ROR Highcharts      更新时间:2023-09-26

我正试图让标签出现在我的柱状图上。

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>

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

控制器: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等……谢谢!

您可以:

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

如果您希望主题标签在x轴上,那么您应该以以下格式传递数据[[subject,count]…]。

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