[英]Using D3 in Rails ActiveAdmin
我正在使用Ruby-on-Rails构建应用程序4.我使用ActiveAdmin设计了一个管理站点。 它工作得很好,但现在我想通过渲染部分使用D3.js将索引页添加到索引页面。 D3.js图书馆给我留下了非常深刻的印象,但我真的很新,所以我一直在尝试一些培训。
我还没有在互联网上发现任何关于特定情况的内容,所以我尝试从这个很好的教程: 在Rails中使用D3 。 我已经在本教程中包含了D3.js库。 我的部分看起来像这样:
#app/views/admin/_chart.html.erb
<h3>HELLO WORLD!</h3>
<svg id="graph"></svg>
admin user.file如下所示:
#app/admin/user.rb
collection_action :data, method: :post do
respond_to do |format|
format.json {
render :json => [1,2,3,4,5]
}
end
end
然后我在assets / javascript / graph.js中有下面的脚本:
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'data',
dataType: 'json',
success: function (data) {
draw(data);
},
error: function (result) {
error();
}
});
function draw(data) {
var color = d3.scale.category20b();
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(data)]);
var chart = d3.select("#graph")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1)
.style("fill", function (d) {
return color(d);
});
bar.append("text")
.attr("x", function (d) {
return x(d) - 10;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.style("fill", "white")
.text(function (d) {
return d;
});
}
function error() {
console.log("error");
}
当我显示页面时,部分正确加载(至少是标题)并且有图表的空间,但它是空的。 我在控制台中没有错误,所以我甚至可能无法上传graph.js文件,或者数据可能无法转移到聊天室。 或两者。 无论如何,我真的不知道为什么都不明白,所以你的帮助将非常感激。 谢谢
S.
[编辑]
我在route.rb文件中更改了路由:
resources :users do
collection do
...
get :data , :defaults => { :format => 'json' }
end
end
然后我将js文件的名称从graph.js更改为users.js。 然后,我将url更改为:'users / data':
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'users/data',
dataType: 'json',
success: function (data) {
draw(data);
},
error: function (result) {
error();
}
});
...
这样我就可以在应用程序的索引页面中显示图表。 但是,我仍然无法在ActiveAdmin中显示它...我想知道是否是因为我没有在ActiveAdmin中正确包含d3(在供应商文件夹中)或者是否是路由问题。
好的,我找到了一种在Active Admin页面中显示简单D3条形图的方法。
这就是我在/ admin / users页面中显示图表的方法:
#app/admin/user.rb
ActiveAdmin.register User do
...
collection_action :data, :method => :get do
respond_to do |format|
format.json {
render :json => [1,2,3,4,5]
}
end
end
#app/views/admin/_charts.html.erb
<h3>User chart</h3>
<svg id="graph"></svg>
<script type="text/javascript">
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: 'users/data',
dataType: 'json',
success: function (data) {
draw(data);
},
error: function (result) {
error();
}
});
function draw(data) {
var color = d3.scale.category20b();
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.range([0, width])
.domain([0, d3.max(data)]);
var chart = d3.select("#graph")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function (d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1)
.style("fill", function (d) {
return color(d);
});
bar.append("text")
.attr("x", function (d) {
return x(d) - 10;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.style("fill", "white")
.text(function (d) {
return d;
});
}
function error() {
console.log("error");
}
</script>
然后,将其显示在仪表板上:
#app/admin/dashboard.rb
ActiveAdmin.register_page "Dashboard" do
...
section do
div do
render 'admin/users/charts'
end
end
...
end
我希望这对你有用。 现在,我将尝试将数据传递给另一种图表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.