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:
¿Qué opción me falta para que se vean los nombres de las barras? Muchas gracias de antemano. 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); }