javascript - 如何在 Google Charts 中使用带有触发器 :'both' 的 HTML 工具提示

Question

当用户单击悬停在列栏上时，我必须显示 HTML 工具提示(使用 Google Charts)，我对此进行了编码，当用户悬停在列栏上时它显示了工具提示:

<script type="text/javascript">
    var colores = ['#1D1E55', '#859DC4', '#6D165E'];
    var indiceColorAsignado = 0;
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var propiedadCol = {
            type: 'string',
            role: 'annotation'
        };
        var dataTable = google.visualization.arrayToDataTable([
            ['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
                    $aux = $encabezados;
                    $conta = 1;
                    foreach ($aux as $key => $value) {
                        if ($conta < 3) {
                            unset($aux[$key]);
                            $conta++;
                        };
                    }
                    $complementoEncabezado = "";                                                                                        
                    foreach ($aux as $key => $value) {
                        $complementoEncabezado .= ",'".$value."',propiedadCol";                                                                                         
                    }
                    $complementoEncabezado .= "],";
                    echo $complementoEncabezado;
                ?>
                <?php
                    $renglodDeDatos = "";
                    $nombresToolTip = $encabezados;
                    unset($nombresToolTip['id']);
                    foreach ($datosAGraficar as $key => $value) {
                        $conta = 1;
                        foreach ($value as $llave => $valor) {
                            if ($conta != 2) {
                                if ($llave == "id") {
                                    $valoresToolTip = $value;
                                    unset($valoresToolTip['id']);
                                    $renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
                                } else {
                                    $renglodDeDatos .= ",".$valor.",''";
                                }                                   
                            }
                            $conta++;
                        }
                        $renglodDeDatos .= "],";
                    }
                    echo $renglodDeDatos;
                ?>
        ]);

        var options = {
            title: '<?php echo $titulo_grafica; ?> del PGD',
            hAxis: {
                title: '<?php echo $titulo_grafica ?>',
                titleTextStyle: {
                    color: 'black',
                    bold:true,
                },
            },
            vAxis: {
                title: 'Porcentaje',
                titleTextStyle: {
                    color: 'black',
                    bold:true,

                },
            },
            // colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
            // colors: ['#AF9965', '#DAC674', '#F3E79A'],
            // colors: ['#EE7009', '#0A7AAC', '#504C4B'],
            // colors: ['#0A19BB', '#02073A', '#4D5073'],
            colors: colores,
            // backgroundColor: {
            //  stroke: 'red',
            //  strokeWidth: 10,
            // },
            focusTarget: 'category',
            selectionMode: 'multiple',
            tooltip: {
                isHtml: true,
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
        google.visualization.events.addListener(chart, 'select', miFuncion);
        var columnas = new Array();

        function miFuncion() {
            var selection = chart.getSelection();
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = dataTable.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                } else if (item.row != null) {
                    var str = dataTable.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = dataTable.getFormattedValue(0, item.column);
                    var indice = columnas.indexOf(item.column);
                    if (indice != -1) {
                        columnas.splice(indice, 1);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, '');
                        };
                    } else{
                        columnas.unshift(item.column);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
                        };
                    };
                    console.log('columnas '+columnas);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                };
            };
            if (message == '') {
                message = 'nothing';
            };
            console.log('You selected ' + message);
            chart.draw(dataTable, options);
        }

        function contenidoHTML(nombresToolTip,valoresToolTip) {
            var indiceObjeto = 1;
            var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
            for(var elemento in nombresToolTip) {
                if (indiceObjeto == 1) {
                    toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
                    indiceObjeto++;
                } else {
                    toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
                    indiceColorAsignado++;
                };
            };
            toolTipHTML += '</div>';
            console.log('HTML '+toolTipHTML);
            // return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
            console.log('indiceColorAsignado '+ indiceColorAsignado);
            indiceColorAsignado = 0;
            return toolTipHTML;
        }
    }
</script>

如何获得两个事件(单击和悬停)以显示 HTML 工具提示？非常感谢

Answer 1

只需设置选项:

tooltip: {
    isHtml: true,
    trigger: 'both'
}