在Rails5应用程序中使用d3.js创建条形图可以通过以下步骤实现:
<%= javascript_include_tag 'd3' %>
<script>
// 获取数据
var data = <%= raw @data.to_json %>;
// 创建SVG容器
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);
// 创建条形图
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return 300 - d;
})
.attr("width", 40)
.attr("height", function(d) {
return d;
})
.attr("fill", "steelblue");
</script>
上述代码假设你的数据存储在一个名为@data的实例变量中,并且条形图的宽度为40,间距为10。
这是一个基本的使用d3.js在Rails5应用程序中创建条形图的示例。根据你的需求,你可以进一步定制和优化条形图的样式和功能。
领取专属 10元无门槛券
手把手带您无忧上云