2012-03-22 12 views
10

¿Aparte de utilizar el gráfico de columna y nombrar adecuadamente, es posible crear histogramas en google chart api?¿Cómo se puede crear un Histograma usando la API de Google api?

+2

Aparte de las diferencias estéticas, en un histograma definiría cada barra como un rango numérico y luego cualquier valor que caiga en ese rango incrementará el recuento de la barra en 1. Prácticamente la diferencia está en forma de entrada de datos .Para un histograma, debería ser capaz de definir el ancho de la barra (es decir, intervalos de 10) y luego simplemente enviar una única secuencia de números. –

Respuesta

6

Google Charts no tiene un gráfico de histograma, ya que es solo una biblioteca de visualización tendrá que modificar el Column Chart para satisfacer sus necesidades. Sin embargo, sospecho que la razón por la que no está satisfecho con el gráfico de columnas se debe al espacio entre columnas, que no se parece demasiado a un histograma. Así que voy a responder esta pregunta primero:

¿Se puede controlar el espaciado entre columnas en un gráfico de columnas?

No, no en este momento. Consulte esta cotización en el Google Charts Community

No hay soporte en la API para controlar el espaciado entre barras. Es posible que pueda hackearlo si está dispuesto a profundizar en el SVG del gráfico.

Por lo tanto, es posible, pero tomará un trabajo adicional de usted. También puede jugar con la opción de configuración chartArea que tendrá cierta influencia en el espaciado entre columnas.

Sin embargo, la pregunta original puede tener una respuesta diferente en realidad.

¿Se puede crear un gráfico de tipo histograma utilizando un gráfico de columnas?

Aunque no se puede controlar el espacio entre conjuntos de columnas en un gráfico de columnas, puede obtener las columnas se apretó casi entre sí mediante la especificación de ellos como diferentes columnas y después configurar el color de cada columna para el mismo color en las opciones de configuración.

Aquí es un simple histograma de 3 columnas:

var data = google.visualization.arrayToDataTable([ 
    ['x', '1-10', '11-20', '21-30'], 
    ['', 3, 5, 4] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"My Histogram", 
      width:600, height:400, 
      hAxis: {title: null}, 
      colors: ['red','red','red'], 
      legend: {position: 'none'} 
      } 
    ); 

Aviso tiene 1 fila con 3 columnas que son cada color 'red'. La desventaja de esto es que pierdes las etiquetas a lo largo del eje x y te dice qué columna representa qué. De nuevo, tendrá que tener algún tipo de lógica para construir este histograma y completar los datos de la manera que desee también.

Por lo tanto, la larga historia corta es Google Charts no tiene un histograma y mientras es posible con un gráfico de columnas, puede considerar buscar en una biblioteca diferente.

+1

como @ ic3 declaró en su respuesta, ahora lo tienen https://developers.google.com/chart/interactive/docs/gallery/histogram –

7

Para añadir a mattedgod de respuesta, La carta columna puede Ahora se creará con las barras espaciadas muy juntas, utilice la opción:

bar: {groupWidth:"100%"}; 
7

Google introdujo un par de días atrás un histograma: link

+0

¿Podría explicar esto un poco, quizás incluya un ejemplo? (no del todo necesario en este caso, pero sí para una respuesta más atractiva) – Shog9

+0

Haga clic en el enlace para ver un ejemplo, es todo lo que necesita. Beso. – ic3