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]
};

注意：如果API调用检索2d数组，则道具series将是没有[]的series: articles