Chartkick是一个图表绘制工具,特色是UI美观、使用简单,而且支持IE6在内的大多数浏览器。之因此说它使用简单,是由于只须要一行Ruby代码便可绘制出漂亮的图表! javascript
好比你须要一个线状图: java
1
|
<%= line_chart User.group_by_day(:created_at).count %>
|
绘制一个饼状图: git
1
|
<%= pie_chart Goal.group("name").count %>
|
柱状图: github
1
|
<%= column_chart Task.group_by_day_of_week(:created_at).count %>
|
多重线图: api
1
2
3
|
<%= line_chart
@goals.map{|goal|
{:name
=> goal.name,
:data
=> goal.feats.group_by_week(:created_at).count }
} %>
|
安装Chartkick只须要往应用中添加该gem: 浏览器
1
|
<%= line_chart User.group_by_day(:created_at).count,
:min
=>
1000,
:max
=>
5000
%>
|
若是你使用Google Charts,须要添加代码: 工具
1
|
<%= javascript_include_tag
"//www.google.com/jsapi",
"chartkick"
%>
|
1
|
<%= javascript_include_tag
"path/to/highcharts.js",
"chartkick"
%>
|
实际上,Chartkick并不依赖于Ruby/Rails。 google
1
2
3
4
5
6
7
8
|
<script
src="/path/to/chartkick.js"></script>
<div
id="chart-1"
style="height: 300px;"></div>
<script>
var chart = document.getElementById("chart-1");
new Chartkick.PieChart(chart, {"Football": 45, "Soccer": 56, "Basketball": 98});
// or remote
new Chartkick.LineChart(chart, "/charts/stocks");
</script>
|