![](/img/trans.png)
[英]How to implement Highcharts column-drilldown chart in Rails application?
[英]rails and highcharts column chart
嗨,我真的在我的rails应用程序中使用highcharts停留在即时通讯上,并试图获取柱形图以显示与数据库中的女性用户相比,我有多少男性用户,但似乎无法弄清楚如何从用户数据库中读取数据表。 这是我的用户模型
def self.gender_analysis(gender)
User.where(:gender => MALE).count
User.where(:gender => FEMALE).count
end
这是我的user.js文件,我在其中创建图表
$(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>
我是Rails开发的新手,将不胜感激
应该是这样的:
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) %>]
]
}]
});
});
很简单:在您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 %>]
}]
});
});
也可以在这里查看小提琴。
编码愉快! :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.