2011-05-16 18 views
25

http://code.google.com/apis/chart/¿Cómo cambiar el texto de información sobre herramientas para google chart api?

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

    // Create our data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'date'); 
    data.addColumn('number', 'Views'); 
    data.addColumn('number', 'People'); 
    data.addRows([ 
    <?php echo $analytics; ?> 
    ]); 
    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.AreaChart(document.getElementById('Analytics-Visualization')); 
    chart.draw(data, {lineWidth:3, pointSize:8, width: 745, height: 240,chartArea:{left:20,top:20,width:640}}); 
} 
</script> 

digamos que cuando hacemos esto lo hace enter image description here

a

enter image description here

tal vez usando el material oyente?

+0

Parece que hay algunos detalles sobre cómo hacer esto aquí http://code.google.com/apis/chart/interactive/docs/examples.html Desplácese hasta la parte inferior de la página. –

+0

¡Esta respuesta lo hace muy simple y fácil! https://stackoverflow.com/a/32862538/1164342 –

Respuesta

3

@Adam; Si desea editar el texto a continuación, comprobar esto http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

puede cambiar su código de aquí

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Task'); 
    data.addColumn('number', 'Hours per Day'); 
    data.addRows(5); 
    data.setValue(0, 0, 'Work'); 
    data.setValue(0, 1, 11); 
    data.setValue(1, 0, 'Eat'); 
    data.setValue(1, 1, 2); 
    data.setValue(2, 0, 'Commute'); 
    data.setValue(2, 1, 2); 
    data.setValue(3, 0, 'Watch TV'); 
    data.setValue(3, 1, 2); 
    data.setValue(4, 0, 'Sleep'); 
    data.setValue(4, 1, 7); 

y si usted quiere que su custom tooltip usted tiene que utilizar javascript de estos

http://code.google.com/p/gvtooltip/

http://informationandvisualization.de/blog/tooltips-google-chart-api

+1

La demostración del enlace de Google Code parece no funcionar del todo bien, aunque el último enlace parece bastante bueno. –

+0

gvtooltip parece abandonado desde 2010 –

+0

Sí, gvtooltip se eliminó con el gráfico de Google Vizualizaion ahora tiene uno incorporado. El incorporado es lo que estás buscando a partir de ahora. – fletchsod

16

Para información sobre herramientas personalizadas, agregue la herramienta punta como una columna adicional:

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}); 
} 
+3

Para aquellos que usan PieCharts y se confunden sobre por qué esto no funciona, no funciona con PieCharts por alguna razón. [Problema n.º 507] (https://code.google.com/p/google-visualization-api-issues/issues/detail?id=507) – Michal

+0

Resulta que la razón por la que no funciona es porque no es compatible, como se afirma en la parte inferior de [la página de descripción de Tooltip] (https://developers.google.com/chart/interactive/docs/customizing_tooltip_content) – Michal

+0

Parece que ahora se admiten algunos años como se indica en la página de descripción de herramientas. y la página de problemas: consulte las últimas entradas: https://github.com/google/google-visualization-issues/issues/507#issuecomment-125237979 – wunth

Cuestiones relacionadas