{"id":472,"date":"2024-08-27T01:43:19","date_gmt":"2024-08-27T04:43:19","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=472"},"modified":"2024-08-27T02:10:51","modified_gmt":"2024-08-27T05:10:51","slug":"chart-em-css-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/08\/27\/chart-em-css-javascript\/","title":{"rendered":"Chart em css javascript"},"content":{"rendered":"

Chart em css Javascript<\/a>.<\/h2>\n
\n

 <\/p>\n

\"Chart
Chart em css javascript<\/figcaption><\/figure>\n

 <\/p>\n

Neste tutorial, vou te mostrar como implementar\u00a0um exemplo b\u00e1sico de gr\u00e1fico em javascript<\/a> usando o Chart.js.<\/h4>\n

A implementa\u00e7\u00e3o de gr\u00e1ficos em HTML \u00e9 uma excelente forma de visualizamos dados de uma forma interativa e atraente. Hoje existem v\u00e1rias bibliotecas que facilitam nossa vida no processo de implementa\u00e7\u00e3o de gr\u00e1ficos, existem libs como Chart.js, Highcharts e D3.js. Para exemplificar escolhi te mostrar um exemplo b\u00e1sico usando o Chart.js , que \u00e9 uma das bibliotecas mais populares e f\u00e1ceis de usar para gera\u00e7\u00e3o de gr\u00e1ficos.<\/h4>\n

Para iniciar este tutorial primeiro precisei incluir a biblioteca Chart.js no meu projeto. Voc\u00ea pode fazer isso adicionando o seguinte script no seu arquivo HTML:<\/h4>\n

 <\/p>\n

<script<\/span> src<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"<\/span>><\/span><\/script<\/span><\/span><\/code><\/pre>\n
 <\/p>\n
Em seguida, criei um elemento <canvas><\/code> no corpo do meu c\u00f3digo HTML onde o gr\u00e1fico ser\u00e1 renderizado:<\/strong><\/p>\n
 <\/p>\n
<canvas<\/span> id<\/span>=\"meuGrafico\"<\/span> ><\/span><\/canvas<\/span>><\/span><\/code><\/pre>\n
 <\/p>\n
\n
Feito isto, agora voc\u00ea precisa configurar o gr\u00e1fico usando JavaScript.\u00a0 Abaixo est\u00e1 um exemplo de como criar um gr\u00e1fico de barras:.<\/h4>\n<\/div>\n
<\/div>\n
<script<\/span>><\/span>\r\n  var<\/span> ctx = document<\/span>.getElementById<\/span>(\"meuGrafico\"<\/span>).getContext<\/span>(\"2d\"<\/span>);\r\n  var<\/span> meuGrafico = new<\/span> Chart<\/span>(ctx, {\r\n    type<\/span>: \"bar\"<\/span>,\r\n    data<\/span>: {\r\n      labels<\/span>: [\"Janeiro\"<\/span>, \"Fevereiro\"<\/span>, \"Mar\u00e7o\"<\/span>, \"Abril\"<\/span>, \"Maio\"<\/span>, \"Junho\"<\/span>],\r\n      datasets<\/span>: [\r\n        {\r\n          label<\/span>: \"Vendas\"<\/span>,\r\n          data<\/span>: [12<\/span>, 19<\/span>, 3<\/span>, 5<\/span>, 2<\/span>, 3<\/span>],\r\n          backgroundColor<\/span>: [\r\n            \"rgba(255, 99, 132, 0.2)\"<\/span>,\r\n            \"rgba(54, 162, 235, 0.2)\"<\/span>,\r\n            \"rgba(255, 206, 86, 0.2)\"<\/span>,\r\n            \"rgba(75, 192, 192, 0.2)\"<\/span>,\r\n            \"rgba(153, 102, 255, 0.2)\"<\/span>,\r\n            \"rgba(255, 159, 64, 0.2)\"<\/span>,\r\n          ],\r\n          borderColor<\/span>: [\r\n            \"rgba(255, 99, 132, 1)\"<\/span>,\r\n            \"rgba(54, 162, 235, 1)\"<\/span>,\r\n            \"rgba(255, 206, 86, 1)\"<\/span>,\r\n            \"rgba(75, 192, 192, 1)\"<\/span>,\r\n            \"rgba(153, 102, 255, 1)\"<\/span>,\r\n            \"rgba(255, 159, 64, 1)\"<\/span>,\r\n          ],\r\n          borderWidth<\/span>: 1<\/span>,\r\n        },\r\n      ],\r\n    },\r\n    options<\/span>: {\r\n      scales<\/span>: {\r\n        y<\/span>: {\r\n          beginAtZero<\/span>: true<\/span>,\r\n        },\r\n      },\r\n    },\r\n  });\r\n<\/span><\/script<\/span>><\/span><\/code><\/pre>\n
\n
\n<\/div>\n
Uma breve explica\u00e7\u00e3o do c\u00f3digo que implementei\u00a0 acima:<\/h4>\n