google visualization - vaxis - ¿Cómo configurar la información sobre herramientas para mostrar los porcentajes para que coincida con el eje en el gráfico de líneas de visualización de Google?

grafico de serie temporal data studio

Question

La información sobre herramientas se puede configurar para mostrar porcentajes utilizando el siguiente código:

var formatter = new google.visualization.NumberFormat({ fractionDigits: 2, suffix: ''%'' }); formatter.format(data, 1); // Apply formatter to first column.

¿Hay una manera para que NumberFormat multiplique cada elemento por 100? De lo contrario, la información sobre herramientas aparece como .50%.

Estoy usando vAxis.format = "format:''#%'' " que se multiplica por 100. Entonces .5 se muestra como 50% en el eje vertical.

De acuerdo con la documentación ( icu-project.org/apiref ), esto se puede sobrescribir encerrando el% entre comillas simples, pero esto no funcionó.

El resultado neto es que la información sobre herramientas no coincide con el eje. ¿Cuál es la mejor manera de hacer esto?

Gracias.

Answer 1

Conseguí este trabajo especificando un formateador exactamente como lo haces tú:

var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    suffix: ''%''
});
formatter.format(chartData, 1);

El 1 en la última llamada significa la segunda columna, en la que tengo valores flotantes.

Luego especifico un formato para el eje en las opciones del gráfico, escapando del signo de porcentaje como se indica en la documentación y otros aquí:

var chartOptions = {
    vAxis: { format: ''#/'%/''' }
};

Luego dibujo el gráfico:

var chart = new google.visualization.ColumnChart(document.getElementById(''chart''));
chart.draw(chartData, chartOptions);

Esto representa un eje del lado izquierdo con valores como 10% , 20% y así sucesivamente. Y la información sobre herramientas se parece a la predeterminada, pero con un porcentaje de 10.10% , 20.20% etc.

Si también desea dos dígitos de fracción en el eje del lado izquierdo, use esto como formato en las opciones del gráfico:

vAxis: { format: ''#.00/'%/''' }

Answer 2

Debe rodear el símbolo de porcentaje (%) en comillas simples.

La línea que solía hacer esto se ve así: options[''vAxis''] = {''format'': "#,###''%''"};

Combinando esto con su formateador anterior, puede hacer que el eje vertical tenga un símbolo de porcentaje y también hacer que la información sobre herramientas lo incluya también.

Answer 3

Ok ... Así que esto es un poco tarde. Admito que no necesitaba esto hace siete años. Sin embargo, esto funcionó para mí.

var rows = data.getNumberOfRows();

for (var i = 0; i < rows; i++) {
    data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
    data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}

En mi caso, estoy usando cuatro columnas, dos de las cuales están asignadas al eje derecho con porcentajes. Quería que la información sobre herramientas de esas columnas reflejara el porcentaje adecuado en lugar de la representación decimal.

Aquí hay un enlace a los documentos de Google:

https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue

Espero que esto ayude a algún extraño al azar a buscarlo. ;)

Answer 4

var formatter = new google.visualization.NumberFormat({ 
  pattern: ''#%'', 
  fractionDigits: 2
});

Gracias a http://groups.google.com/group/google-visualization-api/