如何升级DataTables+Highcharts代码：从Google Sheets API v3迁移到v4

核心修改点 #

• 替换API请求地址：用v4的spreadsheets/values接口替代v3的feeds/list接口
• 重构数据解析逻辑：v4返回纯二维数组结构，直接按行读取单元格值，不再需要gsx$xxx.$t的字段访问方式
• 保留原有业务逻辑：维持两行合并成一行的处理逻辑，确保DataTables和Highcharts的展示效果不变

修改后的完整代码 #

$(document).ready(function() {
    var results = [];
    var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    // 替换为v4的API地址
    var url = "https://sheets.googleapis.com/v4/spreadsheets/1f8Ji80Qv3PX3mcUbHs5MeVHmTdC1lxBoPu72XInckaA/values/1!A2:Z?alt=json&key=AIzaSyB5FsZ-XKEpJVPSmTbQhJPNMOIPYO8VmhU";

    var jqxhr = $.getJSON(url, function() {
            console.log("数据请求成功");
        })
        .done(function(data) {
            console.log("数据解析开始");
            // v4返回的行数据在data.values中，每个元素是一行的单元格数组
            var rows = data.values;
            var rowCount = 0;
            var rowData = [];
            console.log(data);

            $(rows).each(function() {
                // 当前行的单元格值数组，处理空单元格
                var currentRow = this.map(cell => cell || '');
                if (rowCount % 2 === 0) {
                    // 偶数行初始化新行数据
                    rowData = currentRow;
                } else {
                    // 奇数行追加到前一行，合并后存入结果数组
                    rowData = rowData.concat(currentRow);
                    results.push(rowData);
                }
                rowCount++;
            });

            // 初始化DataTables，逻辑和原代码一致
            var table = $('#selection-datatable').DataTable({
                data: results,
                deferRender: true,
                "processing": true,
                paging: false,
                columnDefs: [{
                    className: "details-control",
                    "targets": [0]
                }]
            });

            function format(title) {
                return '<div class="slider" name>' +
                    '<table class="table table-hover border-0 details-table">' +
                    '<thead> ' +
                    '<td>' + title[14] + '</td>' +
                    '<td>' + title[15] + '</td>' +
                    '<td>' + title[16] + '</td>' +
                    '<td>' + title[17] + '</td>' +
                    '<td>' + title[18] + '</td>' +
                    '<td>' + title[19] + '</td>' +
                    '<td>' + title[20] + '</td>' +
                    '<td>' + title[21] + '</td>' +
                    '<td>' + title[22] + '</td>' +
                    '<td>' + title[23] + '</td>' +
                    '<td>' + title[24] + '</td>' +
                    '<td>' + title[25] + '</td>' +
                    '<td>' + title[26] + '</td>' +
                    '<td>' + title[27] + '</td>' +
                    '</thead> ' +
                    '<div id="chart' + title[14] + '"></div>' +
                    '</div>'
            }

            $('#selection-datatable tbody').on('click', 'td.details-control', function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    $('div.slider', row.child()).slideUp(function() {
                        row.child.hide();
                        tr.removeClass('shown');
                    });
                } else {
                    row.child(format(row.data()), 'no-padding').show();
                    tr.addClass('shown');
                    // 截取对应月份数据，索引和原逻辑对齐
                    createChart('chart' + row.data()[14], row.data().slice(16));
                    $('div.slider', row.child()).slideDown();
                }
            });
        });

    function createChart(container, data) {
        Highcharts.chart(container, {
            series: [{
                data: (function() {
                    return data.map(el => Number(el) || 0);
                })()
            }],
            chart: {
                zoomType: 'xy',
                type: 'area',
                backgroundColor: '#253138',
            },
            plotOptions: {
                series: {
                    lineWidth: 2,
                    fillColor: "#0099cc",
                    lineColor: "#f7897b",
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                fillColor: '#000000'
                            }
                        }
                    }
                }
            },
            title: {
                style: {
                    color: '#E0E0E3',
                    fontSize: '20px'
                }
            },
            yAxis: {
                labels: {
                    style: {
                        color: 'white'
                    }
                }
            },
            legend: {
                itemStyle: {
                    color: 'white'
                },
            },
            xAxis: {
                categories: categories,
                labels: {
                    style: {
                        color: 'white'
                    }
                }
            },
        })
    }
});

关键说明 #

1. URL替换：直接使用提供的v4接口地址，确保包含正确的表格ID、数据范围和API密钥
2. 数据解析：v4返回的data.values是二维数组，每个子数组对应一行数据，直接遍历即可，无需处理v3的命名空间字段
3. 空值处理：用map(cell => cell || '')确保空单元格不会导致数据缺失，图表数据转换时用Number(el) || 0避免渲染报错
4. 逻辑对齐：保持原有的两行合并、表格展开、图表渲染逻辑，仅调整数据读取方式

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