时间戳

首页 > 解决方案 > 如何获取谷歌可视化表中单选按钮的值

google-apps-script - 如何获取谷歌可视化表中单选按钮的值

问题描述

我有一个使用图表包装器构建的表，如下所示：

var rightWrapper;
function drawVisualization() {
  rightWrapper = new google.visualization.ChartWrapper({
  "chartType": "Table",
  'dataSourceUrl':'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
  'containerId':'target_table_div',
  'query':'SELECT A,B,C,D',
  'options': { 'width': 700, 'height': 500, 'allowHtml': true }
  });

  google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);

  rightWrapper.draw();

  function onRightReady() {
    google.visualization.events.addListener(rightWrapper.getChart(), 'select', rightSelectionHandler);
  }

  function rightSelectionHandler() {
    var selection = rightWrapper.getChart().getSelection();
    if (selection.length == 1) {
      var item = selection[0];
      if (item.row != null) {
        alert("selected row " + item.row);
        var value = (rightWrapper.getSnapshot().getDataTable().getValue(item.row,3));
        alert(value);
      }
    } 
  }
}

在第 3 列中，我有 html 来构建单选按钮。不幸的是，实际的 html 被存储了，我似乎没有办法轮询来找出现在检查了哪个单选按钮（上面代码中列出的 getValue 总是向我显示用于构建收音机的 html按钮，而不是现在“选中”的按钮）。

不幸的是，似乎该表内的任何点击都必须使用选择侦听器进行拾取，并且选择侦听器不会中继所选行和列之外的任何信息。我尝试构建 change 和 click 功能，并将 s 放在我的单选按钮周围。例如：

$("#radio").click(function(){  //also tried with .change
  alert("working");
});

即使我禁用了原来的监听器，它也永远不会触发。

那么，我怎样才能知道我的用户选择了哪个单选按钮？

注意：我确实需要表格内的单选按钮，因为表格的每一行都有自己的单选按钮，可以为我提供不同的信息。

标签： google-apps-scriptchartsgoogle-visualization

解决方案

您不需要表单，您只需要等待图表的'ready'事件，
然后再分配更改事件。

请参阅以下工作片段，
选择一个收音机以查看名称和值... 

google.charts.load('current', {
  packages: ['controls', 'table']
}).then(function () {
  var rightWrapper = new google.visualization.ChartWrapper({
    chartType: 'Table',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',
    containerId: 'target_table_div',
    query: 'SELECT A,B,C,D',
    options: { 'width': 700, 'height': 500, 'allowHtml': true }
  });

  google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);

  rightWrapper.draw();

  function onRightReady() {
    $('input[type="radio"]').on('change', calcForm2);
  }
});

function calcForm2(sender) {
  console.log(sender.target.name, sender.target.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="target_table_div"></div>

推荐阅读