Foros del Web » Programando para Internet » Javascript »

Google bar chart no me pone nombres de las barras

Estas en el tema de Google bar chart no me pone nombres de las barras en el foro de Javascript en Foros del Web. Hola, He construido un gráfico de barras con Google Chart, pasándole todos los datos que necesito. Me la construye bien, aunque no me pone los ...
  #1 (permalink)  
Antiguo 26/10/2020, 03:26
 
Fecha de Ingreso: septiembre-2003
Mensajes: 337
Antigüedad: 20 años, 7 meses
Puntos: 4
Google bar chart no me pone nombres de las barras

Hola,

He construido un gráfico de barras con Google Chart, pasándole todos los datos que necesito. Me la construye bien, aunque no me pone los nombres de las barras... Los quiero fuera de la gráfica, es decir el nombre por cada barra. Si paso el cursor por encima de cada una de las barras, se ve que sí tienen sus nombres correspondientes (con su dato), pero además de que ponga eso yo lo que quiero es que también se vea fuera (por si se hace captura de pantalla, para que se vea bien a qué corresponde cada barra).

El código que uso para utilizar esta bar chart es este:

Código:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
//google.charts.load('current', {packages: ['corechart']});
function drawChart() {
	var data = google.visualization.arrayToDataTable([ ['Area', 'Cantidad'], ['Electricidad', 1], ['Gestión Comercial', 4], ['Idiomas', 7] ] ); // Define the chart to be drawn.
	
	//el group es para poder poner valor y porcentaje
	var groupData = google.visualization.data.group(
		data
		,[{column: 0, modifier: function () {return 'total'}, type:'string'}]
		,[{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
	);

	var formatPercent = new google.visualization.NumberFormat({
		pattern: '#,##0.0%'
	});

	var formatShort = new google.visualization.NumberFormat({
		pattern: 'short'
	});
	
	var formatoMedias = new google.visualization.NumberFormat({
		pattern: '#,##0.00'
	});
	
	var view = new google.visualization.DataView(data);
  	view.setColumns([0
					,1
					,{
						calc: function (dt, row) { //para poner valor y porcentaje
							var media =  formatoMedias.formatValue(dt.getValue(row, 1));
							var amount =  formatShort.formatValue(dt.getValue(row, 1));
							var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
							 return amount + ' (' + percent + ')'; /* para mostrar porcentajes, se comentara si conviene con el php */							
						}
						,sourceColumn: 1
						,type: 'string' //no 'number' para poder poner tambien el porcentaje ademas del valor. Si solo fuera el valor seria 'number'
						,role: 'annotation'
					}
					]);
	var options = {
		 annotations: { alwaysOutside: true, textStyle: { color: '#000000' } }
		,title: 'Acciones por áreas de formación'
		,titleTextStyle: { fontSize: 24 }
		,legend: {position: 'none'}
		,width: 1200
		,height: 600
		,chartArea : { left: 200, top: 100, bottom:55 }
		,colors: ['#76A7FA']
	}; 
	// Instantiate and draw the chart.
	var chart = new google.visualization.BarChart(document.getElementById('af_porareas'));
	document.getElementById('af_porareas').style.display=null; //dibujo la grafica antes de ocultarla (truco para que no se solapan las leyendas)
	// Wait for the chart to finish drawing before calling the getImageURI() method.
	google.visualization.events.addListener(chart, 'ready', function () {
		//alert(chart.getImageURI());
		document.getElementById('img_af_porareas').value = chart.getImageURI();
	});
	chart.draw(view, options);
}
¿Qué opción me falta para que se vean los nombres de las barras? Muchas gracias de antemano.

Etiquetas: bar, barras, chart, google, nombres
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:09.