ajax - tipos - ¿Cómo personalizar la información sobre herramientas(texto y formato) en los gráficos de barras de visualización de Google?

tipos de graficas

Question

Estoy utilizando el gráfico de barras de visualización de Google y me gustaría personalizar o cambiar el texto y el formato de la información sobre herramientas que aparece al hacer clic en una barra.

He revisado la documentación pero no encontré la manera de implementar esto. Tú sabes:

1. ¿Es incluso posible ?
2. Si es así, ¿podría proporcionar algunos ejemplos de código?

Answer 1

Cree un nuevo tipo de datos para lo que desea en la información sobre herramientas:

var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Game'');
data.addColumn(''number'', ''Transactions'');
data.addColumn({type:''string'', role:''tooltip''}); // here is the tooltip line

Ahora agregue la información que desea en su información sobre herramientas a sus datos:

[''$FormatedWeekday'', $SalesAll,''$ToolTip'']
[''$FormatedWeekday'', $SalesAll,''$ToolTip'']
[''$FormatedWeekday'', $SalesAll,''$ToolTip'']

Perderá todos los datos predeterminados en su sugerencia de peaje, por lo que puede desear volver a empaquetarlo:

$ToolTip = ''''.$FormatedWeekday.'' /u000D/u000A ''.$SalesAll.'' /u000D/u000A ''."Red Cross  Event";

el "/ u000D / u000A" fuerza un salto de línea

Answer 2

Eche un vistazo a los roles de DataTable y al ejemplo de información sobre herramientas: https://developers.google.com/chart/interactive/docs/roles

label: ''Year'',   ''Sales'',         null,   ''Expenses'',         null
`role: domain,     data,       tooltip,         data,      tooltip`
     ''2004'',       1000,    ''1M$ sales,          400,    ''$0.4M expenses
                       in 2004''                     in 2004''
     ''2005'',       1170, ''1.17M$ sales,          460,    ''$0.46M expenses
                        in 2005''                    in 2005''
     ''2006'',        660,  ''.66M$ sales,         1120,    ''$1.12M expenses
                        in 2006''                    in 2006''
     ''2007'',       1030, ''1.03M$ sales,          540,    ''$0.54M expenses
                        in 2007''                    in 2007''

Las etiquetas nulas se utilizan como información sobre herramientas para ''Ventas'' y ''Gastos'' respectivamente.

Answer 3

Estaba tratando de hacer algo similar con un gráfico circular de Google. Con el código original, al pasar el mouse, la información sobre herramientas mostraba la etiqueta, el número sin procesar y el porcentaje.

El código original era:

data.setValue (0, 0, ''Árboles de Navidad'');

data.setValue (0, 1, 410000000);

Y la información sobre herramientas mostraría "Árboles de Navidad 410000000 4.4%".

Para dar formato al texto, agregué una línea al código, por lo que fue:

data.setValue (0, 0, ''Árboles de Navidad'');

data.setValue (0, 1, 410000000);

data.setFormattedValue (0, 1, "$ 410 millones");

El resultado fue una sugerencia que decía: "Árboles de Navidad $ 410 millones 4.4%"

¡Espero que esto ayude!

Answer 4

Google Chart no admite el formato html tooltip LineChart, BarChart. Yo suelo:

google.visualization.events.addListener(chart, ''onmouseover'', function(rowColumn){
                                myFunction();
                            });

en myFunction() : puede usar la popup para mostrar más información.

Answer 5

Hay una manera muy fácil de hacerlo, solo tienes que usar uno de los Formatters para los datos:

// Set chart options
var options = {
hAxis: {format: ''MMM dd, y''}
};

// Format the data
var formatter = new google.visualization.DateFormat({pattern:''EEEE, MMMM d, y''});
formatter.format(data,0);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById(''visualization''));
chart.draw(data, options);

Simplemente formatee el eje de manera diferente al formato de datos, ya que el formato de datos solo se mostrará cuando usted haga clic con el mouse sobre.

Answer 6

La única forma que encontré para deshabilitarlo fue atravesar el DOM en el controlador de desplazamiento (para gráficos circulares de todos modos):

$ (pie.Ac.firstElementChild.contentDocument.childNodes [0] .childNodes [2] .childNodes [1] .firstChild.childNodes [2]). remove ();

Lo que es horrible y está sujeto a que Google mantenga la estructura existente ... ¿hay alguna manera mejor?

Answer 7

Otra forma de hacerlo es agregar otra columna a sus datos que actuará como información sobre herramientas.

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn(''string'', ''Date'');
    data.addColumn(''number'');
    data.addColumn({type:''string'',role:''tooltip''});
    data.addRow();
    base = 10;
    data.setValue(0, 0, ''Datapoint1'');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, ''Datapoint2'');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById(''visualization''));
    chart.draw(data, {legend:''none'', width:600, height:400});
}

Answer 8

Para tu información, todos:

Google agregó información sobre herramientas HTML / CSS personalizada en septiembre de 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

Answer 9

Parece que ahora puede personalizar el texto de la información sobre herramientas agregando una columna especial que tiene la role: ''tooltip'' : https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

Answer 10

También estaba buscando la misma opción. Parece que no hay ninguna manera directa. Pero podemos deshabilitar la información sobre herramientas predeterminada y abrir nuestra propia versión usando SelectHandler. Háganos saber si ha descubierto una forma mejor / directa. Gracias

Answer 11

Puede cambiar la forma en que se formatea el número utilizando la clase google.visualization.NumberFormat .

var formatter = new google.visualization.NumberFormat({
    fractionDigits: 0,
    prefix: ''$''
});

formatter.format(data, 1); // Apply formatter to second column.

Si necesita más flexibilidad, eche un vistazo a la clase PatternFormat .

Aquí está la referencia de la API .