Question

我有一个根据Google表格数据生成的时间线图表/仪表板。我希望能够点击工具提示中的链接来打开Google文档。 Google表格源数据的“工具提示”列中包含指向特定Google文档的URL。显然，这不是时间表支持的操作，但是我看到了类似的解决方法。

Add hyperlink to custom tooltip in Google Charts

我该如何对来自Google表格的数据而不是硬编码到HTML中的数据进行此变通功能？

这是我的仪表板：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(buildTimeline);

      function buildTimeline() {

        var queryString = encodeURIComponent('SELECT B,A,E,C,D');

      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1durFFoL3H6m-z8sQsSxGETaWNTKgs-TrSfJFjJ1ntRs/gviz/tq?gid=299236031&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
var options = {
        height: 300,
tooltip: {isHtml: true, trigger: 'selection'}
      };

var data = response.getDataTable();
     // set the 3rd column to the "tooltip" role
    data.setColumnProperty(2, 'role', 'tooltip');
    data.setColumnProperty(2, 'html', true);

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that categoryFilter is visible to changeRange.
        var categoryFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Grade Level',
'chartArea': {'height': '100%'} 

}
        });

        var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'Timeline',
          'containerId': 'programmatic_chart_div',
          'options': {
            'width': 800,
            'height': 500
          }
        });



        dashboard.bind(categoryFilter, programmaticChart);
        dashboard.draw(data, options);
      }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div">
      <table class="columns">
        <tr style='vertical-align: top'>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>

            <script type="text/javascript">
              function changeRange() {
                categoryFilter.draw();
              }

              function changeOptions() {
                programmaticChart.draw();
              }
            </script>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Screenshot这是我当前看到的，但是我无法单击工具提示中的链接。

如何使用Google表格中的数据将可点击的超链接添加到时间线图表工具提示中？

0 个答案: