我的作品集中有我的 Canvas 标签#show 页面:
<%= 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文件中的data和dataset属性中预加载的数据。我想要一个饼图,其中的标签与股票名称相对应,并使用我的 Rails 数据库中的数据。我抓取 canvas 标签中的数据并可以在我的 js 文件中访问它。 据我了解,我将 pieData 对象传递给 ctx 对象,并且无论我选择哪个图形(在本例中为饼图),它都应该将标签和数据集渲染到图形中。我不确定为什么饼图没有显示。
最佳答案
这是你想要的吗?
您可以传递从rails数据库获取的数据并将其立即插入到您的js代码中(无需将其放入canvas标签中的data属性中)。
我发现您正在使用图表 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
}
});
});
希望它有效!
关于javascript - 在chartjs中渲染Rails json数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40623929/