Google Charts hinzufügen Tooltip

Question

Ich möchte einige Daten zu Tooltips in meinem Diagramm hinzufügen, aber ich kann keinen Weg finden, es zu tun. Ich habe versucht Rolle hinzuzufügen: Tooltip aber nicht

dies mein Code nicht funktioniert ist:

google.charts.load('current', { 
    callback: function() { 
    var cont = 1; 
    var rowtbl = document.getElementById("tabella").rows.length; 
    rowtbl = rowtbl - 1; 

    // use object notation for column headings 
    var data = new google.visualization.arrayToDataTable([ 
     [{type: 'string', label: ''}, {type: 'number', label: 'Tempo in minuti: '}, {type: 'string', role: 'tooltip'}] 
    ]); 

    //number rows table 
    while(cont <= rowtbl){ 
     var nomi; 
     var qnt; 
     var time; 
     nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML; 
     time = document.getElementById("tabella").rows[cont].cells[3].innerHTML; 
     qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; 

     var info = { 
     name: nomi, 
     tempo: time, 
     qn: qnt, 
     }; 

     // add row to google data 
     data.addRow([ 
     info.name, 
     parseFloat(info.tempo), 
     info.qn 

     ]); 

     cont = cont +1; 
    } 

    var options = { 
     tooltip: {isHtml: true}, 
     legend: { position: 'none' }, 
     bar: { groupWidth: "80%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
    }, 
    packages: ['bar'] 
}); 

ich qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; wollen Tooltip zu zeigen in. Wie muss ich meinen Code ändern?

Vielen Dank Jungs!

EDIT

Ich würde meine Tooltip mag so aussehen, ist das möglich?

Answer 1

Notwendigkeit Spalte defintion zu ändern html

aus ermöglichen: {type: 'string', role: 'tooltip'}

zu: {type: 'string', role: 'tooltip', p: {html: true}}

EDIT

Columns Roles wie 'tooltip' und 'style' nicht funktionieren auf -Material Diagramme.

können Sie ein Kern Diagramm verwenden, mit der Option - theme = 'material' -, um den Blick zu bekommen und das Gefühl der Nähe

der folgende Ausschnitt beiden Charts zieht, die Tooltips auf dem Boden arbeiten, Kern Chart

google.charts.load('current', { 
 
    callback: function() { 
 
    var cont = 1; 
 
    var rowtbl = document.getElementById("tabella").rows.length; 
 
    rowtbl = rowtbl - 1; 
 

 
    var data = new google.visualization.arrayToDataTable([ 
 
     [{type: 'string', label: ''}, {type: 'number', label: 'Tempo in minuti: '}, {type: 'string', role: 'tooltip', p: {html: true}}] 
 
    ]); 
 

 
    //number rows table 
 
    while(cont <= rowtbl){ 
 
     var nomi; 
 
     var qnt; 
 
     var time; 
 
     nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML; 
 
     time = document.getElementById("tabella").rows[cont].cells[3].innerHTML; 
 
     qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; 
 

 
     var tooltip; 
 
     tooltip = '<div class="ggl-tooltip">'; 
 
     tooltip += '<div><span class="ggl-tooltip-title">' + nomi + '</span></div>'; 
 
     tooltip += '<div><span class="ggl-tooltip-category">Tempo in minuti:</span></div>'; 
 
     tooltip += '<div><span class="ggl-tooltip-time">' + time + '</span></div>'; 
 
     tooltip += '<div><span class="ggl-tooltip-note">' + qnt + '</span></div>'; 
 
     tooltip += '</div>'; 
 

 
     data.addRow([ 
 
     nomi, 
 
     parseFloat(time), 
 
     tooltip 
 
     ]); 
 

 
     cont = cont +1; 
 
    } 
 

 
    var options = { 
 
     bar: {groupWidth: '80%'}, 
 
     chartArea: {width: '90%'}, 
 
     height: 400, 
 
     legend: {position: 'none'}, 
 
     theme: 'material', 
 
     tooltip: {isHtml: true}, 
 
     width: '100%' 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div_core')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

.ggl-tooltip { 
 
    border: 1px solid #E0E0E0; 
 
    font-family: Arial, Helvetica; 
 
    font-size: 12pt; 
 
    padding: 12px 12px 12px 12px; 
 
} 
 

 
.ggl-tooltip div { 
 
    padding: 6px 6px 6px 6px; 
 
} 
 

 
.ggl-tooltip-title { 
 
    color: #000000; 
 
    font-weight: bold; 
 
} 
 

 
.ggl-tooltip-category { 
 
    color: #676767; 
 
} 
 

 
.ggl-tooltip-time { 
 
    color: #1565C0; 
 
    font-size: 20pt; 
 
} 
 

 
.ggl-tooltip-note { 
 
    color: #F44336; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<table id="tabella"> 
 
    <tr> 
 
    <th> 
 
     nomi 
 
    </th> 
 
    <th> 
 
     qnt 
 
    </th> 
 
    <th> 
 
    </th> 
 
    <th> 
 
     time 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     utente 
 
    </td> 
 
    <td> 
 
     Here value of qnt 
 
    </td> 
 
    <td> 
 
    </td> 
 
    <td> 
 
     40 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     nomi 2 
 
    </td> 
 
    <td> 
 
     tooltip for nomi 2 
 
    </td> 
 
    <td> 
 
    </td> 
 
    <td> 
 
     2 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     nomi 3 
 
    </td> 
 
    <td> 
 
     tooltip for nomi 3 
 
    </td> 
 
    <td> 
 
    </td> 
 
    <td> 
 
     3 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<div id="top_x_div_core"></div>