在chartjs中渲染Rails json数据
Rendering Rails json data in chartjs
我的作品集中有一个canvas标签#show page:
<%= content_tag :canvas, "", id: "positions_chart", width: "300", height: "300", data: {positions: @positions } %>
在我的portfolio.js文件中,我创建了一个chartInstance对象:
$(document).ready(function () {
var context = document.getElementById('positions_chart');
var ctx = context.getContext("2d");
var pieData = {
labels: $("#positions_chart").data(positions['name']),
datasets: [
{
backgroundColor: "rgba(220,220,220,1)",
borderColor: "rgba(220,220,220,1)",
data: $("#positions_chart").data(positions['quantity'])
}
]
}
var chartInstance = new Chart(ctx, {
type: 'pie',
data: pieData,
options: {
responsive: true
}
});
console.log(chartInstance);
});
我正在DOM中加载我想要的数据——一个位置数据的集合。
<canvas id="positions_chart" width="600" height="600"
data-positions="[{"id":1,"ticker":"AAPL","name":"Apple Inc.",
"quantity":20,"portfolio_id":1,"created_at":"2016-10-22T18:19:36.255Z",
"updated_at":"2016-10-23T01:21:38.731Z","price":"116.6"},...
style="width: 300px; height: 300px;"></canvas>
我在网上看到的例子是如何处理js文件中的数据和数据集属性中的预加载数据。我想有一个饼状图的标签对应于报价机名称和使用数据从我的rails数据库。我在画布标签中抓取数据,并在我的js文件中访问它。据我所知,我将pieData对象传递给ctx对象,无论我选择哪个图(在本例中是pie),它都应该将标签和数据集呈现给一个图。我不知道为什么饼状图没有显示。
这是你想要的吗?
你可以传递你从rails数据库得到的数据,并立即插入到你的js代码中(不需要把它放在帆布标签的data属性中)。
我看到你正在使用chart js v2,所以我认为不需要了解上下文。
我还修改了你的代码。
在你的js代码
$(document).ready(function() {
var positionsQuantity = <%= raw(@positions.map(&:quantity)) %>;
var positionName = <%= raw(@positions.map(&:name)) %>;
var ctx = $('#positions_chart');
var pieData = {
labels: positionName,
datasets: [
{
label: "pie labels",
data: positionsQuantity,
backgroundColor: "rgba(220,220,220,1)",
borderColor: "rgba(220,220,220,1)"
}]
}
var chartInstance = new Chart(ctx, {
type: 'pie',
data: pieData,
options: {
responsive: true
}
});
});
希望它能起作用!
相关文章:
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- Ajax and Json with Rails
- 点击浏览器的“后退”按钮显示的是JSON而不是HTML(使用Rails和d3.js)
- Rails-使用ajax改进json响应的处理
- 如何从json在rails中设置hstore值
- Rails结构到JSON对象
- 将JSON从rails控制器加载到javascript文件中的d3.dedefe()函数
- 一个 rails 字段,它是 JSON 对象的数组
- 如何在 Rails 中呈现 json 表单的错误消息
- Javascript 客户端框架与 Rails JSON API - 如何进行集成测试
- Ruby on Rails 在 js.erb 中渲染 json
- 用于 Rails JSON API 的有用 nodejs 库
- 包含javascript的Rails json响应
- 将Rails JSON与JQuery一起使用的简单示例
- 在chartjs中渲染Rails json数据
- Ruby on Rails, json vs js ajax response
- 大多数情况下,Rails JSON请求无法到达控制器
- Rails Json包含自定义值
- Rails-json-jquery不显示视图文件内容
- 将Rails JSON变量传递给javascript变量