如何将Datatables+Highcharts数据源从JSON替换为Google Sheets？

完全可行。Google Sheets支持将表格内容发布为公开可访问的CSV或JSON格式，前端可直接通过HTTP请求获取数据，适配原有的Datatables和Highcharts逻辑。

代码修改方案 #

1. 准备Google Sheets数据源 #

• 将原JSON文件中的数据按字段整理到Google Sheets表格中，确保列名与原JSON的字段完全一致（比如原JSON中的country、year、value等）
• 发布表格：打开Google Sheets，点击「文件」→「共享」→「发布到网络」，选择目标工作表，格式选择「逗号分隔值(.csv)」，复制生成的公开访问链接

2. 修改前端代码 #

原代码直接使用本地country_data变量，需替换为异步请求Google Sheets数据并解析的逻辑，具体修改如下：

替换核心数据源初始化代码

原核心代码：

Highcharts.setOptions({
    global: {
        useUTC: true
    }
});
var main_data = country_data;
var countryArray = null;
// 其余代码详见原示例

修改后的代码：

Highcharts.setOptions({
    global: {
        useUTC: true
    }
});
var main_data = [];
var countryArray = null;

// 请求Google Sheets发布的CSV数据
$.get('你的Google Sheets公开CSV链接', function(csvData) {
    // 解析CSV为符合原格式的JSON数组
    var rows = csvData.split('\n');
    var headers = rows[0].split(',');
    
    for (var i = 1; i < rows.length; i++) {
        if (rows[i].trim() === '') continue;
        var rowItems = rows[i].split(',');
        var dataItem = {};
        
        // 映射列名与数据，自动转换数字类型
        for (var j = 0; j < headers.length; j++) {
            dataItem[headers[j]] = isNaN(rowItems[j]) ? rowItems[j] : Number(rowItems[j]);
        }
        
        main_data.push(dataItem);
    }

    // 执行原有的表格与图表初始化逻辑
    initTableAndCharts();
});

// 封装原有的表格与图表初始化逻辑
function initTableAndCharts() {
    // 原Datatables初始化代码
    $('#example').DataTable({
        data: main_data,
        columns: [
            // 原有的列配置
        ],
        // 其他Datatables配置...
    });

    // 原有的子行Highcharts初始化逻辑...
}

注意事项 #

• 确保Google Sheets表格设置为公开可访问，否则前端请求会因权限问题失败
• 如果原JSON中有特殊字符（如逗号），建议在Google Sheets中用引号包裹对应单元格内容，避免CSV解析错误
• 所有依赖main_data的逻辑必须放到AJAX回调函数内，因为HTTP请求是异步执行的

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