Neste artigo, vamos nos concentrar em uma biblioteca chamada Recharts para criar gráficos 2D interativos. Para isso, vamos usar o Covid-19 incêndio para exibir não apenas dados da Covid19 para comparar países, mas também mostrar dados históricos de cada país. Primeiro criaremos uma tabela mostrando todos os países e usaremos uma função de clique para mostrar os dados históricos de um país.
Configurando nosso ambiente de desenvolvedor
Para este tutorial, vamos usar o React. Em vez de configurar seu próprio projeto React, construí um projeto básico para que você possa começar imediatamente com a codificação, em vez de precisar configurar seu projeto. clonar isso repositório e siga as etapas abaixo.
git clone git@github.com:Ugur22/recharts-basics.git cd recharts-basics npm install npm start Para este projeto, vamos usar as seguintes ferramentas para criar um painel Covid-19:
- Recharts - biblioteca de gráficos para desenhar gráficos.
- Moment.js - analisa e exibe datas.
- Bulma - framework CSS para estilo e grade.
- Sass CSS - fácil reutilização de CSS e mixins.
Depois de terminar, você deverá ver o seguinte gráfico em seu aplicativo da web:
Primeiro gráfico feito com Recharts
Ótimo, agora que está tudo pronto, podemos começar a construir o painel. Em seu App.jsx você pode ver o seguinte código que exibe seu gráfico. Como você pode ver, o Recharts requer muito pouco código para construir um gráfico complexo. Primeiro, importamos os componentes necessários para nosso gráfico. Como usamos um gráfico de linha neste exemplo, também precisamos importar o gráfico de linha e a linha. Se você quiser usar, por exemplo, um gráfico de área, poderá substituí-lo por AreaChart e área. O YAxis é usado para exibir os valores no gráfico e XAxes para espalhá-los horizontalmente. Mais tarde, usaremos o XAxes para exibir as datas para que você possa ver qual valor ocorre em qual data. O componente Tooltip fornece uma dica de ferramenta inteira sem nenhum código extra quando você passa o mouse sobre cada ponto de dados. No elemento Line, você também pode ver uma propriedade chamada dataKey. Com isso, você pode escolher qual campo de seus dados deseja exibir no gráfico. Nesse caso, você pode ver que a primeira linha mostra pv valor para cada página e para a segunda linha, ele usa o uv campo.
import { LineChart, Line, XAxis, YAxis, Tooltip, Legend} from 'recharts'; const data = [ { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 }, { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 }, { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 }, { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 }, { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 }, { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 }, { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }, ]; function App() { return ( ); } #react #javascript # covid19 # data-vizualisation # web-development
medium.com
Crie gráficos interativos com recarregamentos
Neste artigo, vamos nos concentrar em uma biblioteca chamada Recharts para criar gráficos 2D interativos. Para isso, usaremos a api Covid-19 para exibir não apenas dados da Covid19 para comparar países, mas também mostrar dados históricos de cada país. Primeiro criaremos uma tabela mostrando todos os países e usaremos uma função de clique para mostrar os dados históricos de um país.