軌和highcharts柱形圖

Question

喜IM使用highcharts在我的Rails應用程序，並試圖獲得一個柱形圖顯示有多少男性用戶的我已經比女性用戶在我的數據庫，但不能似乎很堅持IM弄清楚如何獲得要從我的用戶數據庫表中讀取的數據。這裏是我的用戶模型

def self.gender_analysis(gender) 
    User.where(:gender => MALE).count 
    User.where(:gender => FEMALE).count 
end 

這裏是我的user.js的文件，其中i箱圖表

$(function(){ 
    new Highcharts.Chart({ 
    chart:{ 
     renderTo: "pie_chart", 
     type:"column" 
     }, 
     title: { text: "Gender" }, 
     xAxis: { type: "percent correct"}, 
     yAxis: {  
     title: { text: "Gender" } 
    }, 
      series: [{ 
      data: <%= users.each do |user| %> 
      }] 
     }); 
    }); 

和我的用戶view.html.erb看起來像

<div id="pie_chart" style="width:568px; height:300px;"></div> 
<h1>Listing users</h1> 

<table> 
    <thead> 
    <tr> 
     <th>Number</th> 
     <th>Gender</th> 
     <th>Hobby</th> 
     <th>Created</th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
    </thead> 
<tbody> 
    <% @users.each do |user| %> 
     <tr> 
     <td><%= user.number %></td> 
     <td><%= user.gender %></td> 
     <td><%= user.hobby %></td> 
     <td><%= user.created_at %></td> 

我是新軌道發展，並會明白給出

Answer 1

很簡單： 在你view，我的意思是在你的html.erb地說：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

，並添加script：

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Total User' 
      }, 
      subtitle: { 
       text: 'Source: Unknown' 
      }, 
      xAxis: { 
       categories: ['Male', 'Female'], 
       title: { 
        text: null 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total Number', 
        align: 'high' 
       }, 
       labels: { 
        overflow: 'justify' 
       } 
      }, 
      tooltip: { 
       valueSuffix: '' 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 

      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Users', 
       data: [<%= User.where(:gender => 'MALE').count %>, <%= User.where(:gender => 'FEMALE').count %>] 
      }] 
     }); 
    }); 

也在這裏檢查小提琴。

http://jsfiddle.net/C5YAX/

編碼快樂！ :)

Answer 2

任何幫助，這應該是這樣的：

def self.gender_analysis(gender) 
    User.where(:gender => MALE).count if gender == :male 
    User.where(:gender => FEMALE).count if gender == :female 
end 

然後在您的ERB文件，你應該有這樣的：

$(function(){ 
    new Highcharts.Chart({ 
    chart:{ 
     renderTo: "pie_chart", 
     type:"column" 
     }, 
     title: { text: "Gender" }, 
     xAxis: { type: "percent correct"}, 
     yAxis: {  
     title: { text: "Gender" } 
    }, 
    , 
     series: [{ 
      type: 'pie', 
      name: 'Gender Split', 
      data: [ 
       ['Female', <%= User.gender_analysis(:female) %>], 
       ['Male',  <%= User.gender_analysis(:male) %>] 
      ] 
     }] 
     }); 
    });