Avaliações do editor: Avaliações do usuário:[Total: 0 Média: 0].ilfs_responsive_below_title_1 { largura: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { largura: 336px; } }
Chartist é uma biblioteca gratuita de geração de gráficos SVG de código aberto que pode ser usada. É muito avançado e suporta a geração de muitos gráficos com muitos parâmetros. Com isso, você pode gerar gráficos coloridos de qualquer tamanho e colocá-los em seu site. Ele ainda suporta animação usando CSS e, portanto, com a ajuda desta biblioteca, você poderá gerar gráficos e gráficos animados.
Na criação de painéis e páginas da Web para mostrar algum tipo de dados relacionados a relatórios, você precisa de gráficos. Muitas vezes, eles precisavam ser dinâmicos ou estáticos. Existem ferramentas para isso, mas não como o Chartist. Este é provavelmente um de seu tipo. Ele vem com uma documentação muito detalhada e exemplos muito bons para que você possa aprender a gerar gráficos rapidamente.
Lista de tipos de gráficos suportados por Chartist:
Gráfico de barras (empilhados e horizontais, incluindo) Gráfico de linhas Gráfico de área Gráfico de pizza Gráfico de rosca Gráfico de medidores Diagrama de dispersão de linha Gráfico de linha bipolar de caminho SVG animado Série temporal
Recursos dos gráficos gerados pelo cartógrafo:
Configuração responsiva extrema. Colocação de rótulo Rótulos de várias linhas Barras sobrepostas para dispositivos móveis Furos nos dados Animação CSS Animação SVG Animações SMIL avançadas Suporte a plug-ins
Como usar o Chartsit para gerar gráficos SVG?
Existem várias maneiras de usar esta biblioteca. Dependendo de que tipo de desenvolvedor front-end você é, você pode usá-lo. Ele vem como um módulo Node, bem como um arquivo de script incorporável que você pode servir diretamente em HTML via CDN.
Para simplificar, você pode usar isso em documentos HTML facilmente. Você só precisa importar esses arquivos na seção
do seu site. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsDepois de vincular as bibliotecas, basta escrever um elemento
Agora, adicione uma tag de script que realmente gerará o gráfico no contêiner especificado. Isso é realmente muito simples. Se você conhece JavaScript muito bem, pode percorrer a documentação para ver como gerar um gráfico. Para fins de demonstração, você pode simplesmente usar o seguinte código. Adicione-o logo abaixo do elemento
Você está quase terminando agora. Basta abrir o arquivo HTML no navegador. O gráfico será gerado agora para você. Você pode brincar com o código JS para gerar um gráfico personalizado com base em dados diferentes. Além disso, você pode gerar um tipo diferente de gráfico dessa maneira.
A documentação no site principal do Chartist é muito bem detalhada. Tem muitos exemplos até de como criar gráficos animados. Como desenvolvedor front-end, você terá que passar por essa documentação para gerar um gráfico. E com algum código, você pode até torná-los exportáveis também.
Conclusões finais:
Devo dizer que o Chartist é uma ferramenta preciosa para desenvolvedores e designers integrarem gráficos personalizados em encenação, bem como website em produção. É muito simples e você não precisa escrever um código muito longo, a menos que não esteja criando algum realmente complexo. O repositório do GitHub já tem mais de 10.000 estrelas, o que é uma grande conquista por si só.
