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

Question

从进出口数据加载Googlesheets到fusioncharts在我的Rails应用程序.

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

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

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(渲染方法)的源文件,它允许你构造一个Ruby对象,它代表你的图表,然后使用javascript来渲染带有图表的模板.

因此,我在这里看到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接口渲染图表.

但是,由于您已经使用前端工具实现了大部分功能,为什么不坚持使用它.