Google Charts с многоуровневой гистограммой – проблема с всплывающей подсказкой
Я создал столбчатую диаграмму с помощью Google Charts. Это тоже отображается правильно. Теперь мне захотелось индивидуализировать стандартную подсказку, которая в принципе работает. К сожалению, теперь всегда отображаются оба — текст HTML и стандартный текст.
Где у меня ошибка?
См. также прикрепленный рисунок, там видно, как это отображается. Но я хочу видеть только таблицу, а не текст, сгенерированный Google.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function customTooltip(url, kuerzel, anzAB, prozAB, anzTreu, prozTreu, anzOK, prozOK, ges) {
return '<div class="googleChartTooltip">'+
'<div class="titel">'+kuerzel+'</div>'+
'<table>'+
'<tr>'+
'<td class="tabkopf1">Fehler</td>'+
'<td colspan="2" class="tabkopf1">Anzahl</td>'+
'</tr>'+
'<tr>'+
'<td class="tabzeileL">ABC</td>'+
'<td class="tabzeileR">'+anzAB+'</td>'+
'<td class="tabzeileR">'+prozAB+'%</td>'+
'</tr>'+
'<tr>'+
'<td class="tabzeileL">XYZ</td>'+
'<td class="tabzeileR">'+anzTreu+'</td>'+
'<td class="tabzeileR">'+prozTreu+'%</td>'+
'</tr>'+
'<tr>'+
'<td class="tabzeileL">kein Fehler</td>'+
'<td class="tabzeileR">'+anzOK+'</td>'+
'<td class="tabzeileR">'+prozOK+'%</td>'+
'</tr>'+
'<tr>'+
'<td class="tabzeileEL">∑ Einträge</td>'+
'<td class="tabzeileER">'+ges+'</td>'+
'<td class="tabzeileER"> </td>'+
'</tr>'+
'</table>'+
'</div>';
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Fehler', 'ABC', 'XYZ', 'keine Fehler', { type: 'string', role: 'tooltip', 'p': { 'html': true } } ],
['2010', 50, 100, 150, customTooltip('', 'MA', 50, 0, 100, 0, 150, 0, 300)],
['2020', 50, 100, 150, customTooltip('', 'MA', 50, 0, 100, 0, 150, 0, 300)],
['2030', 50, 100, 150, customTooltip('', 'MA', 50, 0, 100, 0, 150, 0, 300)]
]);
var options = {
title: 'Fehler',
width: 500,
height: 400,
legend: { position: 'top' },
bar: { groupWidth: '50%' },
isStacked: true,
focusTarget: 'category',
tooltip: { isHtml: true,
ignoreBounds: false }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(data, options);
}
</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>