在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应用程序中创建条形图的示例。根据你的需求,你可以进一步定制和优化条形图的样式和功能。
腾讯云数据湖专题直播
云+社区技术沙龙[第17期]
Elastic 实战工作坊
Elastic 实战工作坊
云+社区技术沙龙[第27期]
云原生正发声
企业创新在线学堂
北极星训练营
云+社区开发者大会 长沙站
Elastic 实战工作坊
云+社区沙龙online [技术应变力]
领取专属 10元无门槛券
手把手带您无忧上云