2015-12-02 40 views
0

我想讓標籤出現在我的柱形圖上。Highcharts,ROR,如何讓標籤工作

的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 

控制器: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等....謝謝!

+0

你想數據標籤的出現或你指的是標籤上的x和y軸? –

+0

謝謝。我指的是X軸上的標籤。我所得到的是0,1,2,3等。我可以讓他們自動更新模型/表格嗎? – Co2

回答

1

您可以:

對於數據,我相信你在路過的類型計數的數組。由於它是1維數組,所以x軸被視爲該數組中的位置。

如果您想要x軸上的主題標籤,那麼您應該按照以下格式傳遞數據[[subject,count] ...]。

參見:http://api.highcharts.com/highcharts#series.data

+0

你是說在視圖中?謝謝。什麼進入類別[],? – Co2

+1

是的,我的意思是在你的note.rb文件中。如果你傳遞一個帶有主題標籤的2維數組count,那麼你不需要在x軸上填充categories數組。如果你想做一個一維數組,那麼你可以將你的標籤作爲x軸上的類別傳遞(只要你只有一個系列就可以得到相同的結果) –

+0

謝謝。主題由用戶填充。這使事情變得複雜。我不想在代碼中分配標籤。我只想讓標籤自動顯示。 – Co2