带堆叠条形图的 Google Charts - 工具提示问题

问题描述 投票:0回答:0

我用谷歌图表创建了一个柱形图。这也正确显示。现在我想个性化标准工具提示,它基本上可以工作。不幸的是,现在总是显示两者 - HTML 文本和标准文本。

我哪里出错了?

Screenshot with info

另请参阅所附图形,您可以在其中看到它的显示方式。但我只想看表格,而不是谷歌生成的文本。

<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>
charts tooltip staking
© www.soinside.com 2019 - 2024. All rights reserved.