Chartkick是一个图表绘制工具,特点是UI美观、使用简单,并且支持IE6在内的大多数浏览器。之所以说它使用简单,是因为只需要一行Ruby代码即可绘制出漂亮的图表!
比如你需要一个线状图:
1
|
<%= line_chart User.group_by_day(
:created_at
).count %>
|
绘制一个饼状图:
1
|
<%= pie_chart Goal.group(
"name"
).count %>
|
柱状图:
1
|
<%= column_chart Task.group_by_day_of_week(
:created_at
).count %>
|
多重线图:
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。
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
>
|
更多介绍:ankane.github.io
项目地址:GitHubChartkick并不局限于Ruby开发。
Chartkick是一个图表绘制工具,特点是UI美观、使用简单,并且支持IE6在内的大多数浏览器。之所以说它使用简单,是因为只需要一行Ruby代码即可绘制出漂亮的图表!
比如你需要一个线状图:
1
|
<%= line_chart User.group_by_day(
:created_at
).count %>
|
绘制一个饼状图:
1
|
<%= pie_chart Goal.group(
"name"
).count %>
|
柱状图:
1
|
<%= column_chart Task.group_by_day_of_week(
:created_at
).count %>
|
多重线图:
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。
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
>
|
更多介绍:ankane.github.io
项目地址:GitHub