在chartjs中渲染Rails json数据答案

【问题标题】：Rendering Rails json data in chartjs在chartjs中渲染Rails json数据
【发布时间】：2016-11-17 16:52:49
【问题描述】：

我的作品集#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 数据库中的数据。我在画布标签中获取数据并可以在我的 js 文件中访问它。据我了解，我将 pieData 对象传递给 ctx 对象，并且无论我选择哪个图形（在本例中为 pie），它都应该将标签和数据集呈现为图形。我不确定为什么饼图没有显示。

【问题讨论】：

标签： javascript ruby-on-rails chart.js

【解决方案1】：

这是你想要的吗？

您可以传递从 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
    }
  });
});

希望它有效！

【讨论】：