使用 innerHTML 嵌入超链接

Embedding Hyperlinks Using innerHTML?

本文关键字：超链接 innerHTML 使用更新时间：2023-09-26

我正在使用两个div来显示Google饼图的自定义工具提示。第一个是文本列，第二个是与文本对应的 URL 列。是否可以在文本中嵌入 URL 并在选择饼图切片时显示可单击的超链接？

以下是图表的数据源：https://docs.google.com/spreadsheets/d/1hPG22Q75rsvrjzqIKzSuaggpRIRVYTOp8JzuIxM7UBQ/edit?usp=sharing

这是饼图本身，以获取更多上下文：http://jsfiddle.net/gregpearl/u2ydom1q/3/

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1hPG22Q75rsvrjzqIKzSuaggpRIRVYTOp8JzuIxM7UBQ/gviz/tq?gid=967749684');
                query.setQuery('select A,B,C,D');
                query.send(handleQueryResponse);
            }
            function handleQueryResponse(response) {
                if (response.isError()) {
                    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }
                var data = response.getDataTable();
                var view = new google.visualization.DataView(data);
                view.setColumns([0, 1]);
                var options = {
                    legend: 'none',
                    title: 'Countries',
                    chartArea: {
                        left: 10,
                        top: 20,
                        width: "92%",
                        height: "100%"
                    },
                    width: 400,
                    height: 400,
                    is3D: 'true',
                    enableInteractivity: 'true',
                    pieSliceText: 'label',
                    fontSize: 10,
                };
                var chart = new google.visualization.PieChart(
                document.getElementById('chart_div'));
                chart.draw(view, options);
                var selectHandler = function(e) {
                    var firsttooltipDiv = document.getElementById('firsttooltip_div');
                    firsttooltipDiv.innerHTML = "";
                    var firstlines = data.getValue(chart.getSelection()[0].row, 2).split(''n');
                    for (var i = 0; i < firstlines.length; i++) {
                        var firstlineDiv = document.createElement('div');
                        firstlineDiv.textContent = firstlines[i];
                        firsttooltipDiv.appendChild(firstlineDiv);
                    }

                    var secondtooltipDiv = document.getElementById('secondtooltip_div');
                    secondtooltipDiv.innerHTML = "";
                    var secondlines = data.getValue(chart.getSelection()[0].row, 3).split(''n');
                    for (var i = 0; i < secondlines.length; i++) {
                        var secondlineDiv = document.createElement('div');
                        secondlineDiv.textContent = secondlines[i];
                        secondtooltipDiv.appendChild(secondlineDiv);
                    }
                }
                google.visualization.events.addListener(chart, 'select', selectHandler);
            }
        </script>
    </head>
    <body>
        <table style="font-size:smaller">
            <tr>
                <td style="vertical-align: top; align: center">
                    <div id="chart_div" style="width: 450px; height: 400px"></div>
                </td>
                <td style="vertical-align: top; align: left; white-space=nowrap; font-weight:bold">
                    <div id="firsttooltip_div"></div>
                </td>
                <td style="vertical-align: top; align: left; white-space=nowrap">
                    <div id="secondtooltip_div"></div>
                </td>
            </tr>
        </table>
    </body>
</html>

我们可以

在右上角显示的链接如下
工作小提琴

处理程序函数如下：

  var selectHandler = function(e) {
    var row = chart.getSelection()[0].row;
    var titles = data.getValue(row, 2).split(''n');
    var urls = data.getValue(row, 3).split(''n');
    var linksDiv = document.getElementById('firsttooltip_div');
    linksDiv.innerHTML = "";
    for (var i = 0; i < titles.length; i++) {
      var link = document.createElement('a');
      link.textContent = titles[i];
      link.setAttribute("href", urls[i] || 'javascript:void(0)');
      link.style.display = "block";
      linksDiv.appendChild(link);
    }
  }