Eje vertical de Google Charts en números enteros

Solución:

Respuesta simple: sí, pero es complicado.

Si solo quieres que los números monitor como números enteros, entonces es fácil:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10, format: '0'}}
          );
}

Si va a Google Playground, notará que las etiquetas de los ejes son 0, 2.5, 5, 7.5, 10. Al agregar el formato: ‘0’ al eje vAxis, solo mostrará números enteros, por lo que mis etiquetas se convertirán en 0, 3 , 5, 8, 10. Pero obviamente esto no es ideal ya que 8 se muestra a la mitad entre 5 y 10, que no lo es, porque el número es en realidad 7.5 y simplemente se está redondeando.

Su capacidad para cambiar la escala / etiquetas del eje está restringida. Y para hacer lo que está pidiendo, se necesitaría un poco de javascript especial para crear una escala adecuada y un número de líneas de cuadrícula para evitar dividir las cosas en números extravagantes.

Básicamente, desea asegurarse de que sus valores máximo y mínimo, y el número de líneas de cuadrícula, permitan una división fácil de modo que solo obtenga números enteros. Para hacer eso, necesitas crear una nueva lógica funky. Aquí hay un código de muestra que le permitirá obtener un valor de eje mínimo / máximo apropiado:

// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Define the number of gridlines (default 5)
var gridlines = 5;

// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);

// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;

// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;

Hay un par de problemas aquí (desafortunadamente). La primera es que estoy usando la cantidad de líneas de cuadrícula para determinar los valores mínimo / máximo; desea averiguar cuántas líneas de cuadrícula debería tener para usar números enteros agradables. La forma más fácil de hacer esto, creo, sería la siguiente (solo pseudocódigo):

// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
    if (Math.round(range/i) = range/i) {
        var gridlines = i
    }
}

Luego, configura la opción de líneas de cuadrícula (vAxis.gridlines) en la variable anterior, y su máximo en newMax y su mínimo en newMin. Eso debería darte etiquetas de eje de números enteros.

Nota: si sus números son realmente pequeños, es posible que la función anterior no funcione. La función tampoco está probada, así que compruébelo con algunos ejemplos en su propio tiempo y avíseme si no funciona correctamente.

Solo para ampliar la respuesta de jmac. Si conoce el valor máximo del gráfico, la solución es simple proporcionando maxvalue asegura que siempre use la misma altura para el gráfico.

Si su contenido es muy dinámico, sin embargo, su solución parece ser la única.

---

---

Utiliza Nuestro Buscador