Chart css
- 1. Chart.css
- 2. Hello! Jonathan Sedrez Frontend | ilegra 2
- 3. CSS data visualization framework 3 Chart.css
- 4. Charts.css é um framework CSS. Ele usa classes de CSS para definir o estilo no HTML e apresentar gráficos para o usuário. 4
- 5. 5 Acessível HTML & CSS Customizável Open source Responsive Variedades Usa tags HTML semânticas Você pode alterar o código Dados brutos Estilize os gráficos do seu jeito Utiliza Media queries Muitos tipos de gráficos
- 7. 7 Classes CSS Bootstrap Tailwind CSS Bulma
- 8. 8 Alternativas A web oferece muitas bibliotecas de gráficos. Todos eles usam JS para renderizar os dados. Cada um implementa uma estratégia diferente, como VML, SVG, canvas, geradores de imagem e outros métodos.
- 10. 10 Qual é o melhor? Não existe a melhor solução, tudo depende das suas necessidades e das capacidades da solução que você escolher. Quando devo migrar? Na maioria dos casos, você só precisa de um gráfico simples para exibir seus dados. Nesses casos, não faz sentido carregar bibliotecas JS pesadas. Para gráficos complexos com comportamentos especiais não abrangidos por Charts.css, você deve pesquisar alternativas JS
- 11. Os dados brutos são colocados no documento coma tag HTML <table> 11
- 12. Para exibir os dados como um gráfico, primeiro você precisa adicionar a classe .charts-css ao elemento <table>: 12
- 13. ● Wrapper ● Heading ● Data ● Datasets ● Orientation ● Labels ● Axes 13 ● Spacing ● Reverse order ● Colors ● Stacked ● Tooltips ● Legend Componentes
- 14. ● Bar ● Column ● Area ● Line ● Pie 14 ● Radar ● Mixed ● Donut ● Polar ● Mixed Gráficos
- 15. 15
- 16. 16
- 17. 17
- 18. Pros 18
- 19. Cons 19