如何使用Google Sheets电子表格数据制作HTML版Google折线图

• 前置操作：先将你的Google Sheets设置为公开可查看权限：点击表格右上角「共享」按钮，常规访问选择「知道链接的任何人」，权限设置为「查看者」后保存。
• 直接复制下方代码到HTML文件中即可运行，代码已自动适配你的表格结构，X轴显示日期、Y轴显示体重。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(drawWeightChart);

        function drawWeightChart() {
            // 拉取对应Google Sheets数据
            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1T8eNrLpk7bOuvHGDojsHALzoxHHHoQ6iJ7AZIAnZntE/gviz/tq?tqx=out:json');
            query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {
            if (response.isError()) {
                alert('数据拉取失败: ' + response.getMessage());
                return;
            }
            var data = response.getDataTable();
            // 图表样式配置
            var options = {
                hAxis: {
                    title: '日期',
                    format: 'yyyy-MM-dd'
                },
                vAxis: {
                    title: '体重'
                },
                legend: { position: 'none' },
                lineWidth: 2,
                pointSize: 4
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <div id="chart_div" style="width: 90%; height: 500px; margin: 0 auto;"></div>
</body>
</html>

• 可选调整：你可以修改代码中options内的参数自定义样式，比如lineWidth调整线宽、pointSize调整数据点大小、height调整图表高度。

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