¿Cómo personalizar información sobre herramientas (texto y formato) en Google Vizualization Bar Charts?

Question

Estoy usando Google Visualization Bar Chart y me gustaría personalizar o cambiar el texto de información sobre herramientas y el formato que aparece al hacer clic en una barra.

He revisado la documentación pero no he encontrado una forma de implementar esto. ¿Sabe usted:

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

Answer 1

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

Answer 2

La única manera que encontré para desactivar fue a recorrer el DOM en el manejador de vuelo estacionario (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 que existe ... ¿Hay alguna otra manera mejor?

Answer 3

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

El código orignal era:

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

data.setValue (0, 1, 410000000);

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

para dar formato al texto, he añadido una línea al código, por lo que era:

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

data.setValue (0, 1, 410000000);

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

El resultado fue un texto de ayuda que decía: "los árboles de Navidad $ 410 millones de un 4,4%"

espero que esto ayude!

Answer 4

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, echar un vistazo a la clase PatternFormat.

Aquí está el API reference.

Answer 5

crear un nuevo tipo de datos para lo que quiere en la punta de la herramienta:

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 añadir la información que desea en su descripción para usted los datos:

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

que va a perder todo los datos por defecto en la punta del peaje así que sería bueno que vuelva a empaquetarlo:

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

el "\ u000d \ u000A" forc es un salto de línea

Answer 6

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 7

Google Chart no es compatible con formato html tooltip LineChart, BarChart. que utilizo:

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

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

Answer 8

Tome un vistazo a Roles DataTable y el ejemplo 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' 

El nula etiquetas se utilizan como información sobre herramientas 'Ventas' y 'gastos', respectivamente.

Answer 9

Hay una manera muy fácil de hacerlo, sólo tiene que utilizar uno de los Formatters de 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); 

Sólo tiene que formatear el eje diferente de formato de datos, ya que el formato de datos sólo se aparece cuando mouseover.

Answer 10

FYI, Todos:

Google ha añadido a medida HTML/información sobre herramientas CSS en septiembre de 2012: https://google-developers.appspot.com/chart/interactive/docs/customizing_tooltip_content

Answer 11

parece que ahora es capaz de personalizar el texto sobre herramientas mediante la adición de una columna especial que tiene role: 'tooltip': https://developers.google.com/chart/interactive/docs/customizing_tooltip_content