Question

我正在使用两个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>

Answer 1

链接我们可以在右上角显示如下
的 Working Fiddle

处理程序功能如下：

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); } }

使用innerHTML嵌入超链接？

1 个答案: