在 Rails 应用上使用 JSON 将数据从 Googlesheets 解析到 Ruby 中的 FusionCharts 时未定义的局部变量或方法“parsedData”

Question

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

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

当我尝试从 pasedData 变量中获取数据时，

Rails 总是给我这个错误 undefined local variable or method 'parsedData' for #<GreetingsController:0x007fdb862e9cf8>。

data: parsedData

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

这是 Jquery 片段，其中 google 工作表变成了 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 method), it allows you to construct a Ruby object, which represents your chart and then uses javascript to render a 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, for example. And then render the chart by using Ruby interface provided by the fusioncharts-rails gem.

在后端获取数据

但既然你已经使用前端工具实现了大部分功能，为什么不坚持下去呢。

在 Rails 应用上使用 JSON 将数据从 Googlesheets 解析到 Ruby 中的 FusionCharts 时未定义的局部变量或方法“parsedData”

Undefined local variable or method `parsedData' when Using JSON to Parse data from Googlesheets To FusionCharts in Ruby on Rails app

javascript

ruby-on-rails

json

ruby

fusioncharts