가로장 및 highcharts 란 도표

Question

안녕 나는 진짜로 나의 선반 app에있는 highcharts를 사용하고 얼마나 많은 남자 사용자가 나의 데이타베이스에있는 여성 사용자와 비교 했는가 보여주기 위하여 세로 막 대형 차트를 얻는 것을 시도했다 그러나 기울인다 얻는 방법 파악하는 것을 보인다 내 사용자 데이터베이스 테이블에서 읽을 데이터. 여기에 내가

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

처럼 내가 상자 차트

$(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 보이는 곳에 내의 user.js이 파일 내 사용자 모델 여기

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

입니다 레일을 처음 사용하면 도움이 될 것입니다.

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) %>] 
      ] 
     }] 
     }); 
    });