Agregar texto personalizado a la información sobre herramientas de visualización de Google

Question

Necesito agregar otra fila de texto en cada una de las sugerencias que estoy mostrando (en un gráfico de área). He incluido una captura de pantalla para ilustrar lo que espero hacer.

Mi cuadro actual: El cuadro con el texto adicional añadido. (Esto es lo que trato de hacer):

Espero hacerlo sin tener que utilizar un JS de terceros para obtener información sobre herramientas personalizadas. ¿Hay alguna manera de simplemente agregar otra fila de contenido basado en texto que se mostrará en la información sobre herramientas predeterminada?

Cualquier ayuda es muy apreciada.

Answer 1

Tenga una mirada en https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable: filas de información sobre herramientas

adicionales son lo que usted está buscando!

El ejemplo:

 
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, '.66$ sales, 1120,  '$1.12M expenses 
          in 2006'     in 2006' 
     '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses 
          in 2007'     in 2007' 

Answer 2

Si habilita focusTarget: 'category' en las opciones. A continuación, la columna tooltip se convierte en value para la información sobre herramientas de los puntos x, y actuales (que se procesa de la forma que desee). Para que pueda imitar el value y agregar el texto adicional que desee. Este es un ejemplo de lo que quiero decir: -

google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
     ['2010', 600,'600: 15% growth'], 
     ['2011', 1500, '1500: 50% growth'], 
     ['2012', 800, '800: -40% growth'], 
     ['2013', 1000, '1000: 25% growth'] 
    ]); 

    var options = { legend: 'none', focusTarget: 'category'}; 
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip')); 
    chart.draw(dataTable, options); 
    } 

Answer 3

no he encontrado una manera de agregar otra fila de datos para la información sobre herramientas por defecto. Puede acercarse a lo que está buscando utilizando información sobre herramientas HTML. Sin embargo, pierdes la cola en la información sobre herramientas. Aquí está una JSbin con la solución utilicé ... http://jsbin.com/tovizukabu/3/edit?css,js,output

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
    dataTable.addColumn('number', 'Expense'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 

    dataTable.addRows([ 
     ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'], 
     ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'], 
     ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'], 
     ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>'] 
    ]); 

    var options = {tooltip: {isHtml: true}}; 
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action')); 
    chart.draw(dataTable, options); 
    } 

Y el CSS ...

.google-visualization-tooltip { 
border: solid 1px #bdbdbd; 
border-radius: 2px; 
background-color: white; 
position: absolute; 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-size: 11px; 
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-family: arial; 
} 

.google-visualization-tooltip div { 
    padding:5px; 
}