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