Как создавать информативные динамические диаграммы с помощью .reduce() и Chart.js

Визуализация диаграмм в приложении для отображения динамической информации — отличный способ предоставить пользователям визуальное представление данных. Chart.js — это библиотека, которая позволяет легко отображать любой тип графика, который лучше всего соответствует вашим потребностям, с большой степенью гибкости (круговая диаграмма, линейная диаграмма, гистограмма и т. д.).

Сначала установите chart.js с помощью yarn или npm.

yarn add react-chartkick chart.js

Затем укажите, какие типы диаграмм вы хотите импортировать в компонент.

import { LineChart, PieChart } from 'react-chartkick'

При извлечении данных из внешнего источника или API данные могут быть представлены не лучшим образом, чтобы удовлетворить ваши потребности в диаграммах. Примером этого, с которым я столкнулся при разработке приложения для отображения биржевой информации, было то, что данные, к которым мне нужно было получить доступ, были доступны, но существовали в одном и том же объекте как относительные ключи для разных значений.

Вместо того, чтобы иметь два отдельных значения ключа (дата, цена), используя метод сокращения, мы можем переформулировать данные так, чтобы дата стала ключом к значению цены.

Метод сокращения предоставляет простой способ взять массив значений и объединить их в одно значение. В методе, описанном ниже, функция вызывается внутри сокращения с помощью коллектора и значения.

data={this.props.chart.reduce(function(collector,value){
               collector[value.date] = value.close
                return collector
                } ,{})
              }

Сборщик сохраняет новые связанные значения из массива, и они возвращаются как вновь сконфигурированный объект.

reconfigured object to chart -> {date : 185.72}

Затем мы можем использовать эту перенастроенную пару ключ-значение для отображения графика относительной цены за заданный период времени.

Вы можете ознакомиться с некоторыми примерами динамических диаграмм, которые я создал с помощью react, chartkick и chart.js в моем приложении Speculate (построенном для моего последнего проекта по завершении интенсива Flatiron School Software Engineering). Смело переходите по ссылке -› https://clever-archimedes-2b5cd4.netlify.com/. Наслаждаться!