{"id":15618,"date":"2024-02-27T09:49:21","date_gmt":"2024-02-27T12:49:21","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=15618"},"modified":"2024-02-27T11:01:55","modified_gmt":"2024-02-27T14:01:55","slug":"criando-grafico-de-pizza-e-rosca-com-chart-js-para-seu-site","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=15618","title":{"rendered":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site"},"content":{"rendered":"\n

No post anterior<\/a>, vimos, com detalhes, como criar um gr\u00e1fico de barras; hoje iremos ver como criar um gr\u00e1fico de pizza e rosca.<\/p>\n\n\n\n

Obs.:<\/strong> veja o c\u00f3digo completo ao final do post.<\/em><\/p>\n\n\n\n

O primeiro passo \u00e9 colocarmos os links CDNs entre as tags <head> e <\/head><\/strong> do nosso HTML.<\/p>\n\n\n\n

<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chart.js"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"<\/font>><\/<\/font>script<\/font>><\/font><\/pre>\n\n\n\n
Apenas o primeiro link seria suficiente, mas poder\u00e1 ter op\u00e7\u00f5es extras que fornecidas por esses outros dois pacotes que s\u00e3o interessantes de usarmos.<\/p>\n\n\n\n
Entre as tags <body> e <\/body><\/strong>, crie a seguinte div com canvas dentro:<\/p>\n\n\n\n
<<\/font>div<\/font>><\/font>\n<<\/font>canvas<\/font> <\/font>id<\/font>=<\/font>"meuGrafico"<\/font>><\/<\/font>canvas<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font><\/pre>\n\n\n\n
Criando gr\u00e1fico de pizza<\/h2>\n\n\n\n
Abaixo da div, ainda dentro de <body>, digite as linhas abaixo. <\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'pie'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Cores'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n      scales: <\/font>{<\/font>\n        y: <\/font>{<\/font>\n          beginAtZero: <\/font>true<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
Veja o resultado,<\/p>\n\n\n
\n
\"Criando<\/figure><\/div>\n\n\n
Criando gr\u00e1fico de rosca<\/h2>\n\n\n\n
Para criar o gr\u00e1fico de rosca, siga os mesmos passos acima, mas troque type: ‘pie’, <\/strong>por type: ‘doughnut’,<\/strong><\/p>\n\n\n\n
<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'doughnut'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Cores'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n      scales: <\/font>{<\/font>\n        y: <\/font>{<\/font>\n          beginAtZero: <\/font>true<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
O resultado,<\/p>\n\n\n
\n
\"Criando
Criando gr\u00e1fico de rosca<\/figcaption><\/figure><\/div>\n\n\n
Logicamente que os dados data: [12, 19, 3, 5, 2, 3],<\/mark><\/strong> e em labels: [‘Vermelho’, ‘Azul’, ‘Amarelo’, ‘Verde’, ‘Roxo’, ‘Laranja’],<\/mark><\/strong> ser\u00e3o trazidos de um banco de dados.<\/p><\/blockquote><\/figure>\n\n\n\n
C\u00f3digo Completo<\/h2>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"en"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n    <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n    <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n    <\/font><<\/font>title<\/font>><\/font>Inserir Texto<\/font><\/<\/font>title<\/font>><\/font>\n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chart.js"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n<<\/font>body<\/font>><\/font>\n\n\n<<\/font>div<\/font>><\/font>\n<<\/font>canvas<\/font> <\/font>id<\/font>=<\/font>"meuGrafico"<\/font>><\/<\/font>canvas<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n\n\n<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'doughnut'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Cores'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n      scales: <\/font>{<\/font>\n        y: <\/font>{<\/font>\n          beginAtZero: <\/font>true<\/font>\n        <\/font>}<\/font>\n      <\/font>}<\/font>\n    <\/font>}<\/font>\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n<\/pre>\n\n\n\n
Inserindo t\u00edtulo no gr\u00e1fico<\/h2>\n\n\n\n
Podemos ver que n\u00e3o h\u00e1 t\u00edtulo no gr\u00e1fico que criamos. Podemos inserir usando o atributo title<\/strong>:<\/p>\n\n\n\n
 options: <\/font>{<\/font>\n        plugins: <\/font>{<\/font>\n           title: <\/font>{<\/font>\n                display: <\/font>true<\/font>,<\/font>\n                text: <\/font>'Cores Vota\u00e7\u00e3o'<\/font>,  <\/font>\n                color: <\/font>'blue'<\/font>,<\/font>\n                font: <\/font>{<\/font>\n                    weight: <\/font>'bold'<\/font>,<\/font>\n                    size: <\/font>20                <\/font>\n                <\/font>}<\/font>\n           <\/font>}<\/font>,<\/font>\n        <\/font>}<\/font>       <\/font>\n\n <\/font>}<\/font><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Inserindo R\u00f3tulos no gr\u00e1fico<\/h2>\n\n\n\n
Para fazer valores aparecerem nas partes da pizza ou da roscam devemos, antes de tudo, usar as linhas abaixo logo ap\u00f3s  const ctx = document.getElementById(‘meuGrafico’);<\/strong><\/p>\n\n\n\n
 \/\/Registre manualmente o plugin chartjs datalabels\n  Chart.register(ChartDataLabels);<\/code><\/pre>\n\n\n\n
e ent\u00e3o, usar dentro de plugins o trecho a seguir:<\/p>\n\n\n\n
datalabels: {\n               \/\/ Posi\u00e7\u00e3o dos r\u00f3tulos \n               \/\/ (in\u00edcio, fim, centro, etc.)\n               anchor: 'end',\n               \/\/ Alinhamento dos r\u00f3tulos \n               \/\/ (in\u00edcio, fim, centro, etc.)\n               align: 'end',\n               \/\/ cores dos r\u00f3tulos\n               color: 'blue',\n               font: {\n                     weight: 'bold',\n                     },\n               formatter: function (value, context) {\n                       \/\/ Mostre o valor atual dos dados\n                       return value;\n              }\n           }\n<\/code><\/pre>\n\n\n\n
Veja c\u00f3digo completo:<\/p>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"en"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n    <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"UTF-8"<\/font>><\/font>\n    <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1.0"<\/font>><\/font>\n    <\/font><<\/font>title<\/font>><\/font>Inserir Texto<\/font><\/<\/font>title<\/font>><\/font>\n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chart.js"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"<\/font>><\/<\/font>script<\/font>><\/font>\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n<<\/font>body<\/font>><\/font>\n\n\n<<\/font>div<\/font>><\/font>\n<<\/font>canvas<\/font> <\/font>id<\/font>=<\/font>"meuGrafico"<\/font>><\/<\/font>canvas<\/font>><\/font>\n<\/<\/font>div<\/font>><\/font>\n\n\n<<\/font>script<\/font>><\/font>\n  <\/font>const<\/font> ctx = <\/font>document<\/font>.getElementById<\/font>('meuGrafico'<\/font>);<\/font>\n\n  <\/font>\/\/Registre manualmente o plugin chartjs datalabels<\/font>\n  Chart.register<\/font>(ChartDataLabels<\/font>);<\/font>\n\n\n\n  <\/font>new<\/font> Chart<\/font>(ctx, <\/font>{<\/font>\n    type: <\/font>'pie'<\/font>,<\/font>\n    data: <\/font>{<\/font>\n      labels: <\/font>[<\/font>'Vermelho'<\/font>, <\/font>'Azul'<\/font>, <\/font>'Amarelo'<\/font>, <\/font>'Verde'<\/font>, <\/font>'Roxo'<\/font>, <\/font>'Laranja'<\/font>]<\/font>,<\/font>\n      datasets: <\/font>[{<\/font>\n        label: <\/font>'# Cores'<\/font>,<\/font>\n        data: <\/font>[<\/font>12, <\/font>19, <\/font>3, <\/font>5, <\/font>2, <\/font>3]<\/font>,<\/font>\n        borderWidth: <\/font>1\n      <\/font>}]<\/font>\n    <\/font>}<\/font>,<\/font>\n    options: <\/font>{<\/font>\n\n        plugins: <\/font>{<\/font>\n           title: <\/font>{<\/font>\n                display: <\/font>true<\/font>,<\/font>\n                text: <\/font>'Cores Vota\u00e7\u00e3o'<\/font>,  <\/font>\n                color: <\/font>'blue'<\/font>,<\/font>\n                font: <\/font>{<\/font>\n                    weight: <\/font>'bold'<\/font>,<\/font>\n                    size: <\/font>20                <\/font>\n                <\/font>}<\/font>\n           <\/font>}<\/font>,<\/font>\n        <\/font>}<\/font>,     <\/font>\n    <\/font>\n\n        datalabels: <\/font>{<\/font>\n               <\/font>\/\/ Posi\u00e7\u00e3o dos r\u00f3tulos <\/font>\n               <\/font>\/\/ (in\u00edcio, fim, centro, etc.)<\/font>\n               anchor: <\/font>'end'<\/font>,<\/font>\n               <\/font>\/\/ Alinhamento dos r\u00f3tulos <\/font>\n               <\/font>\/\/ (in\u00edcio, fim, centro, etc.)<\/font>\n               align: <\/font>'end'<\/font>,<\/font>\n               <\/font>\/\/ cores dos r\u00f3tulos<\/font>\n               color: <\/font>'blue'<\/font>,<\/font>\n               font: <\/font>{<\/font>\n                     weight: <\/font>'bold'<\/font>,<\/font>\n                     <\/font>}<\/font>,<\/font>\n               formatter: <\/font>function<\/font> <\/font>(value, context<\/font>) <\/font>{<\/font>\n                       <\/font>\/\/ Mostre o valor atual dos dados<\/font>\n                       <\/font>return<\/font> value;<\/font>\n              <\/font>}<\/font>\n           <\/font>}<\/font>\n\n\n\n\n\n\n\n\n      <\/font>}<\/font>\n\n  <\/font>}<\/font>);<\/font>\n<\/<\/font>script<\/font>><\/font>\n\n\n\n\n\n<\/<\/font>body<\/font>><\/font>\n<\/<\/font>html<\/font>><\/font><\/pre>\n","protected":false},"excerpt":{"rendered":"
No post anterior, vimos, com detalhes, como criar um gr\u00e1fico de barras; hoje iremos ver como criar um gr\u00e1fico de pizza e rosca. Obs.: veja o c\u00f3digo completo ao final do post. O primeiro passo \u00e9 colocarmos os links CDNs entre as tags <head> e <\/head> do nosso HTML. <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"><\/script>…<\/p>\n
Read More “Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site”<\/span> »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4477],"tags":[4808,4807],"class_list":["post-15618","post","type-post","status-publish","format-standard","hentry","category-programacao-desenvolvimento","tag-chart-js","tag-grafico"],"yoast_head":"\nCriando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/categoriaoutros.com.br\/?p=15618\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros\" \/>\n<meta property=\"og:description\" content=\"No post anterior, vimos, com detalhes, como criar um gr\u00e1fico de barras; hoje iremos ver como criar um gr\u00e1fico de pizza e rosca. Obs.: veja o c\u00f3digo completo ao final do post. O primeiro passo \u00e9 colocarmos os links CDNs entre as tags <head> e <\/head> do nosso HTML. <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"><\/script>...Read More “Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site” »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/categoriaoutros.com.br\/?p=15618\" \/>\n<meta property=\"og:site_name\" content=\"Categoria Outros\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/categoriaoutros\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-27T12:49:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-27T14:01:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i.pinimg.com\/736x\/dc\/60\/0e\/dc600e4f760c46313df33b4621ed6766.jpg\" \/>\n<meta name=\"author\" content=\"Categoria: Outros\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:site\" content=\"@CategoriaOutros\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Categoria: Outros\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618#article\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618\"},\"author\":{\"name\":\"Categoria: Outros\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\"},\"headline\":\"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site\",\"datePublished\":\"2024-02-27T12:49:21+00:00\",\"dateModified\":\"2024-02-27T14:01:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618\"},\"wordCount\":255,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"keywords\":[\"Chart.js\",\"gr\u00e1fico\"],\"articleSection\":[\"Programa\u00e7\u00e3o\/desenvolvimento\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15618#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618\",\"url\":\"https:\/\/categoriaoutros.com.br\/?p=15618\",\"name\":\"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros\",\"isPartOf\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\"},\"datePublished\":\"2024-02-27T12:49:21+00:00\",\"dateModified\":\"2024-02-27T14:01:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/categoriaoutros.com.br\/?p=15618\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/categoriaoutros.com.br\/?p=15618#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/categoriaoutros.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#website\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"name\":\"Categoria Outros\",\"description\":\"Assuntos Diversos\",\"publisher\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/categoriaoutros.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#organization\",\"name\":\"Categoria Outros\",\"alternateName\":\"Categoria Outros\",\"url\":\"https:\/\/categoriaoutros.com.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"contentUrl\":\"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg\",\"width\":400,\"height\":400,\"caption\":\"Categoria Outros\"},\"image\":{\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/categoriaoutros\",\"https:\/\/twitter.com\/CategoriaOutros\",\"https:\/\/br.pinterest.com\/CategoriaOutros\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40\",\"name\":\"Categoria: Outros\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g\",\"caption\":\"Categoria: Outros\"},\"sameAs\":[\"http:\/\/categoriaoutros.com.br\"],\"url\":\"https:\/\/categoriaoutros.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/categoriaoutros.com.br\/?p=15618","og_locale":"pt_BR","og_type":"article","og_title":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros","og_description":"No post anterior, vimos, com detalhes, como criar um gr\u00e1fico de barras; hoje iremos ver como criar um gr\u00e1fico de pizza e rosca. Obs.: veja o c\u00f3digo completo ao final do post. O primeiro passo \u00e9 colocarmos os links CDNs entre as tags <head> e <\/head> do nosso HTML. <script src="https:\/\/cdn.jsdelivr.net\/npm\/chart.js"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-datalabels"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/chartjs-plugin-annotation"><\/script>...Read More “Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site” »","og_url":"https:\/\/categoriaoutros.com.br\/?p=15618","og_site_name":"Categoria Outros","article_publisher":"https:\/\/www.facebook.com\/categoriaoutros","article_published_time":"2024-02-27T12:49:21+00:00","article_modified_time":"2024-02-27T14:01:55+00:00","og_image":[{"url":"https:\/\/i.pinimg.com\/736x\/dc\/60\/0e\/dc600e4f760c46313df33b4621ed6766.jpg"}],"author":"Categoria: Outros","twitter_card":"summary_large_image","twitter_creator":"@CategoriaOutros","twitter_site":"@CategoriaOutros","twitter_misc":{"Escrito por":"Categoria: Outros","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/categoriaoutros.com.br\/?p=15618#article","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15618"},"author":{"name":"Categoria: Outros","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40"},"headline":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site","datePublished":"2024-02-27T12:49:21+00:00","dateModified":"2024-02-27T14:01:55+00:00","mainEntityOfPage":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15618"},"wordCount":255,"commentCount":0,"publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"keywords":["Chart.js","gr\u00e1fico"],"articleSection":["Programa\u00e7\u00e3o\/desenvolvimento"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/categoriaoutros.com.br\/?p=15618#respond"]}]},{"@type":"WebPage","@id":"https:\/\/categoriaoutros.com.br\/?p=15618","url":"https:\/\/categoriaoutros.com.br\/?p=15618","name":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site - Categoria Outros","isPartOf":{"@id":"https:\/\/categoriaoutros.com.br\/#website"},"datePublished":"2024-02-27T12:49:21+00:00","dateModified":"2024-02-27T14:01:55+00:00","breadcrumb":{"@id":"https:\/\/categoriaoutros.com.br\/?p=15618#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/categoriaoutros.com.br\/?p=15618"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/categoriaoutros.com.br\/?p=15618#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/categoriaoutros.com.br\/"},{"@type":"ListItem","position":2,"name":"Criando Gr\u00e1fico de Pizza e Rosca com Chart.JS para seu Site"}]},{"@type":"WebSite","@id":"https:\/\/categoriaoutros.com.br\/#website","url":"https:\/\/categoriaoutros.com.br\/","name":"Categoria Outros","description":"Assuntos Diversos","publisher":{"@id":"https:\/\/categoriaoutros.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/categoriaoutros.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/categoriaoutros.com.br\/#organization","name":"Categoria Outros","alternateName":"Categoria Outros","url":"https:\/\/categoriaoutros.com.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","contentUrl":"https:\/\/categoriaoutros.com.br\/wp-content\/uploads\/2023\/08\/categoriaoutros-logo.jpg","width":400,"height":400,"caption":"Categoria Outros"},"image":{"@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/categoriaoutros","https:\/\/twitter.com\/CategoriaOutros","https:\/\/br.pinterest.com\/CategoriaOutros\/"]},{"@type":"Person","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/ba0f432708449436912bd6736864bb40","name":"Categoria: Outros","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/categoriaoutros.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed97775f0ab50750ed638ed3417ea85e19ced2c648da167a108e393ae5fd9e33?s=96&d=mm&r=g","caption":"Categoria: Outros"},"sameAs":["http:\/\/categoriaoutros.com.br"],"url":"https:\/\/categoriaoutros.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15618"}],"version-history":[{"count":9,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15618\/revisions"}],"predecessor-version":[{"id":15632,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=\/wp\/v2\/posts\/15618\/revisions\/15632"}],"wp:attachment":[{"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/categoriaoutros.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}