Rails应用中从Google Sheets导数据到FusionCharts时parsedData未定义

你遇到的错误本质是前端JavaScript变量和后端Rails控制器代码不在同一个执行环境里：

• parsedData是浏览器端JS运行时生成的变量，只存在用户的浏览器中
• Rails控制器代码是在服务器端执行的，根本无法访问浏览器里的变量，所以会报undefined local variable or method错误

下面给你两种可行的解决方案，根据你的需求选择即可：

方案一：后端直接处理Google Sheets数据（推荐，更符合Rails架构） #

把原本前端做的请求和解析工作移到Rails控制器里，这样后端就能直接拿到数据并配置FusionCharts：

步骤1：添加HTTP客户端依赖 #

在Gemfile里添加Faraday（Rails常用的HTTP请求库）：

gem 'faraday'

然后执行bundle install安装依赖。

步骤2：修改控制器代码 #

require 'faraday'
require 'json'

class GreetingsController < ApplicationController
  def your_action_name # 替换成你的实际动作名
    spreadsheet_id = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
    sheets_url = "https://spreadsheets.google.com/feeds/list/#{spreadsheet_id}/od6/public/basic?alt=json"

    # 1. 后端请求Google Sheets数据
    response = Faraday.get(sheets_url)
    sheets_data = JSON.parse(response.body)['feed']['entry']

    # 2. 解析成FusionCharts需要的格式
    @parsed_data = sheets_data.map do |entry|
      {
        label: entry['title']['$t'],
        value: entry['content']['$t'].gsub('income: ', '')
      }
    end

    # 3. 配置FusionCharts，直接使用后端解析好的数据
    @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: @parsed_data
      }
    })
  end
end

方案二：前端初始化FusionCharts（适合需要动态更新数据的场景） #

保持前端请求数据的逻辑，然后在JS里直接初始化图表，不再依赖后端配置数据：

步骤1：简化控制器代码（只传基础配置） #

class GreetingsController < ApplicationController
  def your_action_name
    # 只定义图表基础配置，data留空
    @chart_config = {
      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: []
      }
    }
  end
end

步骤2：修改前端JS代码 #

在视图里直接用JS初始化图表，把解析好的parsedData传入：

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, 
        parsedData = []; 

    data.forEach(function(entry) {
      parsedData.push({ 
        label: entry.title.$t, 
        value: entry.content.$t.replace('income: ', '') 
      }); 
    });

    // 直接在前端初始化FusionCharts
    var chart = 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: "$",
          theme: "fint",
          exportEnabled: "1",
        },
        data: parsedData
      }
    });
    chart.render();
  } 
});

额外注意事项 #

1. 确保你的Google Sheets文档设置为公开可访问，否则请求会返回权限错误
2. 方案一中建议添加异常处理（比如网络请求失败、数据格式异常），避免控制器崩溃
3. 如果需要频繁更新数据，方案二更适合，因为不需要每次都请求后端

内容的提问来源于stack exchange，提问作者Slowboy