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">&sum; Einträge</td>'+
                 '<td class="tabzeileER">'+ges+'</td>'+
                 '<td class="tabzeileER">&nbsp;</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>

0 ответов

Другие вопросы по тегам