Quando se trata do mundo da pesquisa, é crucial compartilhar suas descobertas com seu público. Uma das maneiras mais comuns de fazer isso é usando gráficos.
Então, como você renderiza seus gráficos em seu site? Um método é usar imagens. Em alguns casos, isso é perfeitamente normal. No entanto, há um pequeno problema neste caso: às vezes, as imagens não são renderizadas bem em telas com muitos pixels. Além disso, eles ficam borrados quando aumentados.
Para atenuar isso, você teria que aumentar a resolução do gráfico. Mas isso levará a outro problema: imagens maiores ocupam mais memória e, portanto, demoram mais para carregar. Como podemos nos livrar desse problema?
Felizmente, é aqui que entra o ApexCharts.js . É uma biblioteca de código aberto fácil de usar que permite construir gráficos interativos para seu projeto.
Aqui estão alguns de seus recursos:
Capacidade de resposta: Seus gráficos serão dimensionados de acordo com o dispositivo de visualização. Isso contribui para uma melhor IU para todos os dispositivos Anotações: O Apex também permite que você coloque rótulos em seus gráficos, ajudando assim o leitor a entender os gráficos com facilidade 
Animações: Assim como as anotações, as animações trazem uma melhor experiência do usuário. A melhor parte? Você pode até personalizar a aparência de sua animação 
Introdução ao ApexCharts
Antes de materializar um gráfico, primeiro precisamos inicializar um projeto React:
npx create-react-app apex-tutorial
Em seguida, para instalar as dependências necessárias, execute o seguinte comando de terminal:
npm install apexcharts react-apexcharts
Gráficos de barras
Os gráficos de barras são úteis quando você deseja exibir uma comparação de valores em vários subgrupos de seus dados. Um exemplo notável é a comparação de alturas entre vários arranha-céus.
Exibindo inteiros no eixo x
Iremos replicar esses dados de amostra de Matemática :
Este trecho de código renderiza um gráfico de barras básico usando os dados acima:
exportar a função default SampleLine () {const series=[{name:”Temperature in Fahrenheit”,//será exibido nos dados do eixo y: [43, 53, 50, 57]}]; const options={chart: {id:”simple-bar”}, xaxis: {categories: [1, 2, 3, 4]//será exibido no x-asis}}; return (
); }
Como você pode ver, o componente Gráfico aceita três adereços importantes:
As opções prop especifica a configuração do gráfico. Aqui, especificamos os rótulos para o eixo x. O tipo prop informa ao ApexCharts que tipo de gráfico queremos exibir. Nesse caso, estamos renderizando um gráfico de barras. A prop da série contém os dados que desejamos exibir. O Apex exibirá isso no eixo y 
Exibindo strings no eixo x
Para este exemplo, carregaremos este conjunto de dados de Estatísticas como fazer :
Podemos renderize esses dados escrevendo o seguinte código:
const series=[{name:”Height in feet”, data: [2722, 2080, 2063, 1972, 1516],},]; const options={chart: {id:”simple-bar”,}, xaxis: {categories: [“Burj Khalifa”,”Tokyo Sky Tree”,”KVLY-TV mast”,”Abraj Al-Bait Towers”,”Torre Bren”,],},}; return (
);
Observe que, desta vez, passamos uma matriz de valores de string para a propriedade xaxis.categories. Nenhuma configuração adicional foi necessária!
Este será o resultado do programa:
Alterando a orientação de um gráfico
Por padrão, o Apex exibe nossos gráficos na orientação vertical. Você pode renderizá-los horizontalmente usando a propriedade option.plotOptions.bar.horizontal:
const options={plotOptions: {bar: {horizontal: true,//gráfico de barras horizontal},},//código extra removido para brevidade}; return (
);
No snippet acima, definimos a propriedade horizontal como true. Isso inverterá a orientação do gráfico.
Gráficos de pizza e rosca
Os gráficos de pizza permitem que você mostre dados em termos de porcentagens ou proporções.
Para demonstrar gráficos de pizza, usaremos este conjunto de dados de Math Is Fun :
Assim como os gráficos de barras, construir gráficos de pizza é fácil. Para fazer isso, você precisa passar seus dados e atribuir o tipo prop à torta, assim:
const options={labels: [“Comedy”,”Action”,”Romance”,”Drama”,”SciFi”]}; série const=[4, 5, 6, 1, 5];//nosso retorno de dados (
);
Aqui, a propriedade options.label contém uma matriz. Cada elemento nesta matriz corresponde a uma seção no gráfico. Mais tarde, mudamos o tipo de suporte para torta. Isso instruirá o Apex a renderizar um gráfico de pizza.
Para transformar isso em um gráfico de rosca, modifique o valor do tipo para rosca:
Gráficos de linha
Este tipo de gráfico é comum quando você deseja representar tendências ou comportamentos em relação ao tempo.
Como exemplo, usaremos esta tabela de Chartio :
Renderizando valores únicos
Para começar com os gráficos de linha, vamos exibir apenas a coluna Convidados. Na próxima seção, exibiremos Convidados e Assinantes no mesmo gráfico.
O código a seguir renderiza as informações da matriz Convidados:
const series=[{nome:”Convidados”, dados: [19 , 22, 20, 26]}]; opções const={xaxis: {categorias: [“2019-05-01″,”2019-05-02″,”2019-05-03″,”2019-05-04”]}}; return
Neste trecho de código, estamos renderizando o campo Convidados. Além disso, também usamos valores de data em nosso eixo x. O Apex analisará automaticamente esses valores e os exibirá como uma linha do tempo.
Renderizando vários valores
A biblioteca Apex também permite aos usuários plotar vários conjuntos de dados no mesmo gráfico.
Aqui, iremos renderizar os dados dos convidados e dos assinantes desta vez.
Para adicionar mais dados à sua planilha, anexe outro objeto à matriz da série, como:
const series=[{nome:”Convidados”, dados: [19, 22, 20, 26],},//dados adicionais nesta matriz.. {nome:”Subs”, dados: [103, 105, 98, 83], },];
Este será o resultado:
Gráficos combinados
Em alguns casos, é comum exibir vários tipos de gráficos em uma figura. Um exemplo pode ser acoplar um gráfico de barras e um gráfico de linhas.
Para fazer isso com Gráficos Apex, você pode especificar a propriedade de tipo na matriz de série da seguinte maneira:
const series=[{type:”line”,//renderizar um gráfico de linha para este nome de dados:”Convidados”, dados: [19, 22, 20, 26],}, {type:”coluna”,//use o gráfico de colunas aqui. nome:”Assinantes”, dados: [103, 105, 98, 83],},]; return (
);
Aqui, estamos renderizando os dados dos convidados em um gráfico de linha. Mais tarde, dissemos ao React para representar o conjunto de dados dos assinantes com um gráfico de barras (colunas).
Personalização de traços
O Apex ainda oferece aos desenvolvedores a opção de personalizar a aparência de suas linhas.
Para optar por uma linha de aparência mais suave, altere a propriedade options.stroke.curve para smooth:
const guestOption={stroke: {curve:”smooth”,},//..}; return (
);
Se você quiser usar uma curva de linha de degrau, altere a opção de curva para linha de degrau:
const guestOption={stroke: {curve:”stepline”,},//código adicional…
Gráficos radiais
Os gráficos radiais são adequados para indicar o progresso. Um exemplo mostra o andamento do download de um arquivo:
const series=[70];//70 por cento const options={labels: [“Progress”],//label deste diagrama}; return
Desta vez, definimos a propriedade type como radialBar. Isso exibirá um medidor circular na página.
Criando uma barra de carregamento
Para mostrar os recursos da barra radial, construiremos uma barra de carregamento simples usando ApexCharts:
const [progresso, setProgress]=useState (0); deixe intervalo=useRef (nulo); useEffect (()=> {interval.current=setInterval (()=> {setProgress ((old)=> old + 50);}, 1000); return ()=> {clearInterval (interval.current);}; }, []); useEffect (()=> {if (progress 100) return; clearInterval (interval.current);}, [progress]); série const=[progresso];//retorno de 70 por cento
Aqui está uma explicação deste código:
Aqui, usamos um Gancho de intervalo. Esta é uma instância de useRef e será responsável por controlar nosso intervalo ao longo do ciclo de vida do aplicativo. Além disso, quando o componente é montado na IU, pedimos ao React para executar um método setInterval. Isso aumentará o valor de progresso em 50 unidades. Cada vez que o Gancho de progresso muda, o aplicativo verifica se seu valor excede 100. Se essa condição for atendida, o React removerá o intervalo da memória. Como resultado, o programa para de incrementar o valor do progresso 
Gráficos sincronizados
Se você tiver vários gráficos com os mesmos valores do eixo x, pode ser bom visualizá-los por meio de gráficos sincronizados.
Critérios
Usar gráficos sincronizados em seu aplicativo é um processo fácil, mas você deve garantir que seu código atenda às seguintes condições:
Os xaxis.categories são os mesmos para todos os gráficos A opção chart.group deve ser idêntica. Caso contrário, o Apex não sincronizará seus gráficos. As dimensões (propriedades de largura e altura) também devem ser options.id semelhantes devem ser diferentes para cada gráfico. Isso permite que a biblioteca identifique cada figura e as exiba na tela
Uso simples
O trecho de código abaixo exibirá os gráficos de convidados e assinantes e os sincronizará:
//criar séries e opções para os dados de nossos’hóspedes’const guestSeries=[{nome:”Convidados”, dados: [19, 22, 20, 26],},]; const guestOption={chart: {id:”guest”, group:”social”,}, xaxis: {categories: [“2019-05-01″,”2019-05-02″,”2019-05-03″,”04/05/2019″],},};//criar séries e opções para nossos dados de’assinantes’const subSeries=[{nome:”Subs”, data: [103, 105, 98, 83],},]; const subOptions={chart: {id:”Subs”, group:”social”,//group name same as guestOptions}, xaxis: {categories: [“2019-05-01″,”2019-05-02″,”03/05/2019″,”04/05/2019”],},}; return (
);
Neste trecho de código, criamos uma série e um objeto de opções para cada conjunto de dados. Também é importante notar que nossa propriedade de grupo e os valores do eixo x de cada conjunto são idênticos. Isso permite que o Apex renderize os gráficos e emparelhe-os para construir gráficos sincronizados.
Esta será a saída:
Animações
Conforme afirmado anteriormente, O Apex permite que os desenvolvedores modifiquem as animações dos gráficos para atender às suas necessidades. Nesta seção, abordaremos algumas propriedades importantes que permitem o controle sobre a animação.
Desativando todas as animações
Para remover totalmente as animações, atribua a propriedade options.chart.animations.enabled a false:
const guestOption={chart: {animations: {enabled: false,//sem animations},},//código desnecessário redigido..}; return (
);
O código acima instrui o React a renderizar os gráficos e remover as animações.
Alterando a velocidade
Você pode acelerar ou desacelerar suas animações por meio da propriedade speed. O valor padrão é 800.
No código abaixo, estamos acelerando nossa animação:
const options={chart: {id:”simple-bar”, animations: {speed: 100,//make a transição mais rápida},//código adicional..
Para tornar a animação mais lenta, aumente o valor da velocidade da seguinte maneira:
const options={chart: {id:”simple-bar”, animations: {velocidade: 1900,//tornar a transição mais lenta},//código adicional..
Conclusão
Você pode encontrar o código-fonte deste programa neste CodeSandbox .
Neste guia, discutimos um um punhado de gráficos e conceitos importantes para ajudá-lo a começar com o Apex biblioteca de gráficos . Se você deseja renderizar gráficos em seu aplicativo da web, os Apex Charts serão uma ótima opção para seu arsenal. As linhas de código necessárias para renderizar seus gráficos são mínimas, reduzindo assim o código clichê.
Muito obrigado por ler!
