0

tengo un grafico en google chart en el cual quiero que se muestre los valores por cada barra del grafico intente hacerlo pero no funciono, por cierto el tipo de grafico es columnchart.

hasta ahora se ve asi

quiero que muestre los valores como este grafico por ejemplo

//========== aca esta el codigo de javascript=====================//

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['', 'Excelente', {
      role: 'annotation'
    }, 'Bueno', {
      role: 'annotation'
    }, 'Regular', {
      role: 'annotation'
    }, 'Deficiente', {
      role: 'annotation'
    }],
    ['Valoración\n general\n de\n la\n atención', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Trato', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Tiempo\n de\n espera', 75, '75', 25, '25', 0, '0', 0, '0'],
    ['Información\n clara\n y\n precisa', 75, '75', 25, '25', 0, '0', 0, '0'],

  ]);
  var options = {
    chart: {
      title: 'Comunicación',
      width: 300,
      height: 600,
      legend: 'bottom'
    },

    vAxis: {
      minValue: 0,
      maxValue: 100,
      format: '#\'%\'',
      direction: 1
    },

    hAxis: {
      textStyle: {
        fontSize: 17,
      }
      
    }
  }
};

var chart = new google.charts.Bar(document.getElementById('div0'));

chart.draw(data, google.charts.Bar.convertOptions(options));
}
<div id="div0"></div>

4
  • @Rubén si esa linea de want era un comentario que borre y quedo eso. sabes como agregar los valores a cada barra del grafico el 22 jun. 2017 a las 20:34
  • @Rubén ya lo corregi el 22 jun. 2017 a las 20:36
  • @Rubén si sigue sin funcionar, no muestra los valores en cada barra del grafico el 22 jun. 2017 a las 20:44
  • En mi humilde opinión, deberías incluir un ejemplo mínimo verificable que genere las gráficas como se muestra en la gráfica y luego indicar lo que has intentado y el error que resulta.
    – Rubén
    el 22 jun. 2017 a las 21:03

1 respuesta 1

1

Como en las revisiones previas el código en la pregunta no generaba la gráfica1, para mostrar cómo agregar las etiquetas a las barras he adaptado uno de los ejemplos en https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars. Básicamente el "truco" consiste en agregar {role: 'annotation'} y los valores correspondientes al arrayToDataTable.


En un comentario mencioné que al código de la pregunta le faltan varias cosas. En la parte del HTML, le falta la llamada a loader.js, en la parte de JavaScript le faltan las llamadas google.charts, tiene un } que está demás, en el cuerpo de la pregunta se dice que es ColumnChart pero en el código se llama a una gráfica Bar, entre otros posibles problemas cosas.


google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', {role: 'style'}, {role: 'annotation'}],
    ['Copper', 8.94, '#b87333', 'Cu'],
    ['Silver', 10.49, 'silver', 'Ag'],
    ['Gold', 19.30, 'gold', 'Au'],
    ['Platinum', 21.45, 'color: #e5e4e2', 'Pt']
  ]);


  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 200,
    bar: {
      groupWidth: "95%"
    },
    legend: {
      position: "none"
    },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("barchart_values"));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_values"></div>

6
  • arriba en el codigo que puse igual tiene los annotation en el array pero no funciona , lo unico que es diferente es que en el codigo que muestras tiene el role:style. el 23 jun. 2017 a las 0:16
  • A tu código le faltan varias cosas. En la parte del HTML, le falta la llamada a loader.js, en la parte de JavaScript le faltan las llamadas google.charts, tiene un } que está demás, en el cuerpo de la pregunta dices que es ColumnChart pero en el código llamas a una gráfica Bar, entre otras cosas.
    – Rubén
    el 23 jun. 2017 a las 0:25
  • si eso me di cuenta recien y lo cambie y ahi funciono era el tipo de grafico ya que debia ser columnchar y no bar gracias por la respuesta el 23 jun. 2017 a las 0:31
  • ahora tengo otro problema con los labels de abajo ya que como son muy grandes se ponen con puntitos, sabes como hacer para que se pueda ver todas las letras del labels el 23 jun. 2017 a las 0:35
  • @josemigueljara: Actualiza el código de la pregunta o publica una nueva para entender mejor a que te refieres.
    – Rubén
    el 23 jun. 2017 a las 0:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.