Блог

В настоящее время я храню массив localStorage и хочу отобразить данные в виде линейной диаграммы из react-google-charts библиотеки — как бы я поступил с моим текущим кодом?

Вот мой код:

Component.js

 import React, { useState, useEffect } from "react";
import { Container } from "react-bootstrap";
import { useParams } from "react-router-dom";
import { Chart } from "react-google-charts";

function Component(props) {
    const [chartData, getChartData] = useState([]);
    let { key } = useParams();

    useEffect(() => {
      getLocalData();
    });

    const getLocalData = () => {
      let key = key;
      let local = localStorage.getItem(key);
      getChartData(JSON.parse(local));
      // The data type that getChartData() is set to is the array
    };

    return (
      <Container>
        <Chart
          width={"100%"}
          height={"300px"}
          chartType="LineChart"
          loader={<div>Loading Chart...</div>}
          data={[
            ["x", key],
            /* Set the values in the data equal to the index of the value and the value 
            from the array stored in chartData 
            Example: [index, value] */

          ]}
          options={{
            hAxis: {
              title: "Time",
            },
            vAxis: {
              title: "Data",
            },
          }}
          rootProps={{ "data-testid": "1" }}
        />
      </Container>
    );
}

export default Component;