如何在触发器中使用HTML工具提示：Google Charts中的'both' [英] How can I use HTML tooltip with trigger:'both' in Google Charts

问题描述

当用户点击悬停栏列时，我必须显示HTML工具提示（使用Google图表），我已经对此进行了编码，并在用户悬停列栏时显示工具提示：

I have to show HTML tooltip (using Google Charts) when the user click an hover de column bars, I've coded this and it shows the tooltip when the user hover the column bar:

<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工具提示，我如何获得两个事件（点击和悬停）？非常感谢

How can I get both events(click and hover) in order to show the HTML tooltip? Thank a lot

推荐答案

只需设置以下选项即可：

Just set the option:

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

这篇关于如何在触发器中使用HTML工具提示：Google Charts中的'both'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！