React从Google Sheets取数据绘制折线图无线条显示问题求助

我正在开发一个React项目，目标是从Google Sheets获取数据并在网页上以折线图展示。目前已成功获取数据并能在console.log中查看，但网页上的折线图始终无法显示线条，仅能看到图表框架。

相关代码 #

App.js #

import React, { useState, useEffect } from 'react';
import ChartComponent from './chart';
import fetchDataFromSheets from './spreadsheet'
import './Style.css'

const App = () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const credentials = require('./service-account.json');
    const sheetId = 'ID GoogleSheet';

    fetchDataFromSheets(sheetId, credentials)
      .then(data => {
        console.log(data);
        setChartData(data);
      });
  }, []);

  return (
    <div>
      <div className='chart-container'>
        <ChartComponent data={chartData} />
      </div>
    </div>
  );
};

export default App;

ChartComponent.js 及 Interface.js #

// ChartComponent.js
import { Chart as ChartJS} from 'chart.js/auto';
import { Line } from 'react-chartjs-2';

const ChartComponent = ({ data }) => {
  const chartData = {
    labels: data.map(d => d.Date),
    datasets: [
      {
        label: 'PriceBefore',
        data: data.map(d => d.PriceBefore),
        fill: false,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
      },
      {
        label: 'PriceAfter',
        data: data.map(d => d.PriceAfter),
        fill: false,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
      }
    ]
  };

  return <Line data={chartData} />;
};

export default ChartComponent

// Interface.js
import '../interface/Style.css'
import App from './logic'

export default function Interface() {
  return (
    <div className='container'>
      <header className='header'></header>
      <div className='graph'></div>
      <footer className='footer'>
        <App />
      </footer>
   </div>
  );
}

spreadsheet.js #

import { GoogleSpreadsheet } from 'google-spreadsheet';
import { JWT } from 'google-auth-library';

async function fetchDataFromSheets(sheetId) {
  const serviceAccountAuth = new JWT({
    email: "PrivateEmail",
    key: "-----BEGIN PRIVATE KEYEND PRIVATE KEY-----\n",
    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
  });

  const doc = new GoogleSpreadsheet(sheetId, serviceAccountAuth);

  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0];

  const rows = await sheet.getRows();
  console.log(rows)

  return rows.map(row => ({
    date: row['Date'],
    price: row['Price']
  }));
}

export default fetchDataFromSheets;

package.json #

{
  "name": "my-stone-market",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "browserify": "^17.0.0",
    "chart.js": "^4.4.1",
    "google-auth-library": "^9.4.1",
    "google-spreadsheet": "^4.1.1",
    "net": "^1.0.2",
    "querystring-es3": "^0.2.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-social-icons": "^6.7.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "assert": "^2.1.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.3"
  }
}

问题原因与修复方案 #

核心问题：数据字段不匹配 #

从Google Sheets获取数据时，spreadsheet.js返回的对象键为date和price，但ChartComponent中尝试读取Date、PriceBefore、PriceAfter这些不存在的字段，导致图表没有有效数据，自然无法显示线条。

修复步骤 #

1. 对齐数据字段

   • 如果你的Google Sheets表格包含Date、PriceBefore、PriceAfter三列，修改spreadsheet.js的返回逻辑：

     return rows.map(row => ({
       Date: row['Date'],
       PriceBefore: row['PriceBefore'],
       PriceAfter: row['PriceAfter']
     }));
     

   • 如果表格只有Date和Price列，修改ChartComponent使用正确的字段：

     const chartData = {
       labels: data.map(d => d.date),
       datasets: [
         {
           label: 'Price',
           data: data.map(d => d.price),
           fill: false,
           backgroundColor: 'rgba(75, 192, 192, 0.2)',
           borderColor: 'rgba(75, 192, 192, 1)',
         }
       ]
     };
     

2. 正确使用认证凭据
   App组件传递了credentials参数，但fetchDataFromSheets未接收使用，改为从参数读取认证信息：

   async function fetchDataFromSheets(sheetId, credentials) {
     const serviceAccountAuth = new JWT({
       email: credentials.client_email,
       key: credentials.private_key,
       scopes: ['https://www.googleapis.com/auth/spreadsheets'],
     });
     // 后续代码不变
   }
   

3. 确保图表容器有足够尺寸
   在Style.css中给.chart-container设置明确的宽高：

   .chart-container {
     width: 80%;
     height: 400px;
     margin: 0 auto;
   }
   

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