React Firebase：创建图表时出现问题

Question

我正在编写一个使用 Firebase 作为数据库的 React 文章应用程序。我想创建一个图表，其中星期几为 X 轴，文本区域中写入的字数为 Y 轴。除了弄清楚如何将这些数据正确地放入图表之外，我什么都能做。

import React from "react";
import Chartist from "react-chartist";
import ChartistTooltip from 'chartist-plugin-tooltips-updated';

import {useEffect, useState} from 'react'


import { db } from "../index";

export const SalesValueChart = () => {
  
  const [articles, setArticles] = useState([]);

  const reducer = (accumulator, currentValue) => accumulator + currentValue;

  useEffect(() => {
    getArticles();
    console.log(articles.reduce(reducer, 0))
  }, []); // blank to run only on first launch

  function getArticles() {
    db.collection("notes").onSnapshot(function (querySnapshot) {
      setArticles(
        querySnapshot.docs.map((doc) => doc.data().wordsCounted)  
      );
     
    });
  }

  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [articles.reduce(reducer, 0)]
  };


  const options = {
    low: 0,
    showArea: true,
    fullWidth: true,
    axisX: {
      position: 'end',
      showGrid: true
    },
    axisY: {
      // On the y-axis start means left and end means right
      showGrid: false,
      showLabel: false,
      labelInterpolationFnc: value => `$${value / 1}k`
    }
  };

  const plugins = [
    ChartistTooltip()
  ]

  return (
     <Chartist data={data} options={{...options, plugins}} type="Line" className="ct-series-g ct-double-octave" />


  );
};

export const SalesValueChartphone = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [[1, 2, 2, 3, 3, 4, 3]]
  };

  const options = {
    low: 0,
    showArea: true,
    fullWidth: false,
    axisX: {
      position: 'end',
      showGrid: true
    },
    axisY: {
      // On the y-axis start means left and end means right
      showGrid: false,
      showLabel: false,
      labelInterpolationFnc: value => `$${value / 1}k`
    }
  };

  const plugins = [
    ChartistTooltip()
  ]

  return (
    <Chartist data={data} options={{...options, plugins}} type="Line" className="ct-series-g ct-major-tenth" />
  );
};

................................. ...................................

Answer 1

如果我没理解错的话：

1 - 在 firebase 调用之后，您可以在状态中仅存储具有值

的数组

    setArticles(
      querySnapshot.docs.map((doc) => doc.data().wordsCounted)
    );

2 - 现在你的数据变量可以像这样初始化

      const data = {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [articles]
      };

N.B。如果 API 调用检索二维数组，则 prop series 将是 series: articles 而没有 []

React Firebase：创建图表时出现问题

React Firebase : problem creating a chart

reactjs

firebase

google-cloud-firestore

textarea