javascript - 如何在 googlechart api 中添加函数 SelectHandler

Question

我一直在尝试在堆积条形图中添加可点击的链接。我根本找不到任何解决办法。有人可以帮助我吗？我想要的是当我点击数据时，它会根据点击的数据转到链接

Image of the column

我正在使用这个Googlechart

这是代码:

 var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

这是我添加的。对于每个数据，它只会转到相同的链接..我想将每个数据放在不同的链接

function selectHandler() {
          var selectedItem = chart.getSelection()[1];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 1);
            alert('The user selected ' + topping);
          }
        }
 google.visualization.events.addListener(chart, 'select', selectHandler);

Answer 1

除了选择的行之外，选择属性还包括列...

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ],
    ['2010', 10, 24, 20, 32, 18, 5, ''],
    ['2020', 16, 22, 23, 30, 16, 9, ''],
    ['2030', 28, 19, 29, 30, 12, 13, '']
  ]);

  var options = {
    width: 600,
    height: 400,
    legend: {position: 'top', maxLines: 3},
    bar: {groupWidth: '75%'},
    isStacked: true
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.BarChart(container);

  google.visualization.events.addListener(chart, 'select', selectHandler);
  function selectHandler() {
    var selectedItem = chart.getSelection();
    if (selectedItem.length > 0) {
      var value = data.getValue(selectedItem[0].row, selectedItem[0].column);
      console.log('The user selected ' + data.getColumnLabel(selectedItem[0].column) + ': ' + value);
    }
  }

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>