	Idioma
	Ingles
	Espanhol
	Português

Gráfico Barras

É criado com um modelo de gráfico de barras.

Básico

Horizontal

Empilhado

Grupo Empilhado

									
										$render = '';
										$resposta = '';

									
										dc.cw("BarChart", "widget_basico", {
											id: "basico"
											, "config": {
												"type": "bar"
												, "data": {
													"datasets": [{
														"type": "bar"
														, "data": [65, 59, 80, 81, 56, 55, 40]
														, "label": "Primeiro Conjunto"
														, "hidden": false
														, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"]
														, "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"]
														, "borderWidth": 1
													}]
													, "labels": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho"]
												}
												, "options": {
													"barPercentage": 0.9
													, "indexAxis": "x"
													, "gridLines": {
														"offsetGridLines": true
													}
													, "scales": {
														"y": {
															"offset": true
															, "stacked": false
															, "ticks": {
																"autoSkip": true
																, "mirror": false
																, "beginAtZero": true
															}
														}
													}
													, "animation": {
														"duration": 0
													}
													, "plugins": {
														"title": {
															"display": true
															, "text": "Gráfico Barra"
														}
														, "legend": {
															"display": true
															, "position": "top"
															, "fullWidth": true
															, "reverse": false
															, "rtl": false
															, "labels": {
																"usePointStyle": false
																, "color": "#2980B9"
																, "font": {
																	"size": 24
																	, "style": "bold"
																}
															}
														}
													}
												}
											}
										});
										dc.cw("BarChart", "widget_horizontal", {
											id: "horizontal"
											, "config": {
												"type": "bar"
												, "data": {
													"datasets": [{
														"type": "bar"
														, "data": [65, 59, 80, 81, 56, 55, 40]
														, "label": "Primeiro Conjunto"
														, "hidden": false
														, "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"]
														, "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"]
														, "borderWidth": 1
													}]
													, "labels": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho"]
												}
												, "options": {
													"barPercentage": 0.9
													, "indexAxis": "y"
													, "gridLines": {
														"offsetGridLines": true
													}
													, "scales": {
														"x": {
															"offset": true
															, "stacked": false
															, "ticks": {
																"autoSkip": true
																, "mirror": false
																, "beginAtZero": true
															}
														}
													}
													, "plugins": {
														"title": {
															"display": true
															, "text": "Gráfico Barra Horizontal"
														}
													}
												}
											}
										});
										dc.cw("BarChart", "widget_empilhado", {
											id: "empilhado"
											, "config": {
												"type": "bar"
												, "data": {
													"datasets": [{
														"type": "bar"
														, "data": [62, -58, -49, 25, 4, 77, -41]
														, "label": "Conjunto 1"
														, "hidden": false
														, "backgroundColor": "rgb(255, 99, 132)"
													}, {
														"type": "bar"
														, "data": [-1, 32, -52, 11, 97, 76, -78]
														, "label": "Conjunto 2"
														, "hidden": false
														, "backgroundColor": "rgb(54, 162, 235)"
													}, {
														"type": "bar"
														, "data": [-44, 25, 15, 92, 80, -25, -11]
														, "label": "Conjunto 3"
														, "hidden": false
														, "backgroundColor": "rgb(75, 192, 192)"
													}]
													, "labels": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho"]
												}
												, "options": {
													"barPercentage": 0.9
													, "indexAxis": "x"
													, "gridLines": {
														"offsetGridLines": true
													}
													, "scales": {
														"x": {
															"offset": true
															, "stacked": true
														}
														, "y": {
															"offset": true
															, "stacked": true
														}
													}
													, "plugins": {
														"title": {
															"display": true
															, "text": "Gráfico de Barras \- Empilhado"
														}
														, "tooltip": {
															"enabled": true
															, "mode": "index"
															, "intersect": false
															, "displayColors": false
															, "rtl": false
														}
													}
												}
											}
										});
										dc.cw("BarChart", "widget_grupo", {
											id: "grupo"
											, "config": {
												"type": "bar"
												, "data": {
													"datasets": [{
														"type": "bar"
														, "data": [-32, -70, -33, 30, -49, 23, -92]
														, "label": "Conjunto 1"
														, "hidden": false
														, "stack": "Stack 0"
														, "backgroundColor": "rgb(255, 99, 132)"
													}, {
														"type": "bar"
														, "data": [83, 18, 86, 8, 34, 46, 11]
														, "label": "Conjunto 2"
														, "hidden": false
														, "stack": "Stack 0"
														, "backgroundColor": "rgb(54, 162, 235)"
													}, {
														"type": "bar"
														, "data": [-45, 73, -25, 65, 49, -18, 46]
														, "label": "Conjunto 3"
														, "hidden": false
														, "stack": "Stack 1"
														, "backgroundColor": "rgb(75, 192, 192)"
													}]
													, "labels": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho"]
												}
												, "options": {
													"barPercentage": 0.9
													, "indexAxis": "x"
													, "gridLines": {
														"offsetGridLines": true
													}
													, "scales": {
														"x": {
															"offset": true
															, "stacked": true
														}
														, "y": {
															"offset": true
															, "stacked": true
														}
													}
													, "plugins": {
														"title": {
															"display": true
															, "text": "Gráfico de Barras \- Grupo Empilhado"
														}
														, "tooltip": {
															"enabled": true
															, "mode": "index"
															, "intersect": false
															, "displayColors": false
															, "rtl": false
														}
													}
												}
											}
										});

Nome	Padrão	Tipo	Descrição
id	null	String	Identificador único do componente
rendered	true	Boolean	Valor booleano para especificar a renderização do componente, quando definido como false o componente não será renderizado.
binding	null	Object	Uma expressão que mapeia para uma instância UIComponent do lado do servidor em um bean de apoio
model	null	ChartModel	Objeto modelo de dados e configurações.
style	null	String	Estilo embutido do componente.
styleClass	null	String	Classe de estilo do componente.
widgetVar	null	String	Nome do widget do lado do cliente.

Localidade

Estilo de entrada

Temas

Estilos

Gráfico Barras

Básico

Horizontal

Empilhado

Grupo Empilhado

Recarregando a página