使用JSON将Googlesheets中的数据解析为Ruby on Rails应用程序中的FusionCharts时未定义的局部变量或方法`parsedData'

Question

我在我的rails应用程序中将数据从Googlesheets加载到fusioncharts。

我使用Jquery从google工作表中获取数据，如本教程中所示https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/

当我尝试从这样的undefined local variable or method 'parsedData' for #<GreetingsController:0x007fdb862e9cf8>variable中获取数据时，Rails总是给我这个错误pasedData。

data: parsedData

我不确定我在这里做错了什么，这是我第一次使用JSON将数据加载到rails app中的fusioncharts。任何帮助将非常感激

这里是Jquery片段，googlesheets变成了JSON。

var spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  url = "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetId +
  "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        label: data[i].title.$t,
        value: data[i].content.$t.replace('income: ', '')
      });
    }

  }
});

这是rails控制器的fusionchart片段

     @chart2 = Fusioncharts::Chart.new({    

     type: 'bar2d',
      renderAt: 'chart-container',
      width: '100%',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        chart: {
         caption: "Highest Paid Actors",
         yAxisName: "Annual Income (in milion USD)",
         numberPrefix: "$",
         theme: "fint",
        exportEnabled: "1",
        },

           data: parsedData 
    }
})

这里有关于rails和fusioncharts https://github.com/fusioncharts/rails-wrapper的说明

Answer 1

您似乎对fusioncharts/rails-wrapper gem提供的机会感到困惑。

如果你看看这个gem的源文件（render方法），它允许你构造一个Ruby对象，它代表你的图表，然后使用javascript来渲染图表中的template。

因此，我在这里看到2个选项。

第一个选择是继续教程：

使用指定的id创建一个元素，该元素将包含您的图表：

<div id="chart-container">
  <p>The chart will render here!</p>
</div>

使用js收到数据后立即呈现数据：

var spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  url = "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetId +
  "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        label: data[i].title.$t,
        value: data[i].content.$t.replace('income: ', '')
      });
    }

    new FusionCharts({
      type: 'bar2d',
      renderAt: 'chart-container',
      width: '100%',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Highest Paid Actors",
          "yAxisName": "Annual Income (in milion USD)",
          "numberPrefix": "$"
        },
        "data": parsedData
      }
    }).render();
  }
});

通过这种方法，您可以使用jQuery获取数据并在指定的容器中解析它，从而避免使用后端。

另一种选择是通过使用HTTParty gem获取后端中的数据。然后使用fusioncharts-rails gem提供的Ruby接口渲染图表。

但是，既然您已经使用前端工具实现了大部分功能，那么为什么不坚持使用它。