Блог

Главная - Вопросы по программированию - Как отобразить массив из нескольких объектов для построения графиков?

Как отобразить массив из нескольких объектов для построения графиков?

#javascript #reactjs #chartist.js #react-chartist

#javascript #reactjs #chartist.js #react-chartist

Вопрос:

У меня есть ответ API, который предоставляет несколько объектов в массиве:

 [{"symbol":"AAPL","date":"2020-02-27","adj_close":68.24}, 
 {"symbol":"TSLA","date":"2020-02-27","adj_close":133.8}, 
 {"symbol":"TSLA","date":"2020-02-28","adj_close":122.3}, 
 {"symbol":"AAPL","date":"2020-02-28","adj_close":64.09}, 
 {"symbol":"TSLA","date":"2020-03-02","adj_close":137.33}, 
 {"symbol":"AAPL","date":"2020-03-02","adj_close":69.43}, 
 {"symbol":"TSLA","date":"2020-03-03","adj_close":143.22},
  ...
]

Я пытаюсь создать map(), который отображает каждый уникальный symbol ответ из ответа для каждого <card> , который уже отображается через другой массив данных. Вот так:

введите описание изображения здесь Но, как вы можете видеть, функция отображения, которую я создал для своих графиков, не работает. Он складывает все данные для каждого уникального symbol объекта на каждую карту. Я бы хотел, чтобы у каждого уникального символа были свои собственные данные. Мне не удалось добиться успеха, я сделал воспроизводимый код ниже:

воспроизводимый code:https://codesandbox.io/s/gallant-curie-5qck3?file=/src/index.js

Вот как я все настроил:

Parents.js

 export function MiniGraphDisplay(props)
{
    const { data } = props;
    const { slug } = useParams();
    const [historicalPrice, setHistoricalPrice] = useState([]);

    const fetchData = useCallback(async () =>
    {
        const response = await axiosInstance.get('bucket/graph-price/'   slug)
        const result = response.data;
        setHistoricalPrice(result);
    }, [])

    useEffect(() =>
    {
        fetchData();
    }, []);

    return (
        <>
        <Container maxWidth="lg" component="main">
            <Grid container spacing={5} alignItems="flex-end">
                {data[0]?.map((data,index) => {
                    return (
                        <Grid item key={index} xs={4} md={4}>
                            <Card>
                            <CardHeader
                            title={<Chip label={data.symbol} />} 
                            subheader={data.adj_close}        
                            />      
                            <CardContent >
                                <div>
                                <MiniGraphs historicalPrice={historicalPrice} />
                                </div>              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
            </Grid>
        </Container>
        </>
    );
}

Child.js

 export function MiniGraphs(props)
{
  const { historicalPrice } = props;

  const getChartData = () =>
  {
    const labels = [];
    const series = [];

    historicalPrice.forEach((item,) =>
    {
      labels.push(item.date);
      series.push(item.adj_close);
    });

    return {
      labels: labels,
      series: [series]
    };
  };

  // Add graph configuration here
  const chartOptions = {
    // width: 2000,
    height: 200,
    // scaleMinSpace: 20
    onlyInteger: true,
    showPoint: false,
    axisX: {
      labelInterpolationFnc: function (value, index)
      {
        return index % 32 === 0 ? value : null;
      },
    }
  };

  return (
    <>
      { historicalPrice amp;amp; <ChartistGraph data={getChartData()} options={chartOptions} type="Line" />}
    </>
  );
}

Ответ №1:

Просто отрабатываю здесь свою Песочницу. Похоже, первое, что нужно исправить, — это передавать только соответствующие данные вашему MiniGraphs компоненту. Это может быть сделано с помощью:

 ...
<CardContent>
  <div>
    <MiniGraphs
      historicalPrice={response.filter(
      (i) => i.symbol === data.symbol
      )}
    />
  </div>
</CardContent>
...

Еще одна вещь, которой вам, похоже, не хватает, по крайней мере, в вашей песочнице, — это правильный стиль для ваших графиков. Поэтому я добавил содержимое этого файла https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css к styles.css файлам в песочнице.

Кажется, результат — это то, что вы ищете: https://codesandbox.io/s/young-https-tol8c?file=/src/App.js

Ответ №2:

Я думаю, вы можете попробовать и вот ссылка

 <MiniGraphs symbol={data.symbol} historicalPrice={response} />

и для фильтрации данных

 const { historicalPrice, symbol } = props;

  const filterBySymbol = (symbol, key) =>
    historicalPrice
      .filter((elm) => elm.symbol === symbol)
      .map((elm) => elm[key]);


  const mapper = {
    labels: filterBySymbol(symbol, "date"),
    series: [filterBySymbol(symbol, "adj_close")]
  };
...

<ChartistGraph data={mapper} ...