javascript - 通过选择处理程序将链接添加到 Google Chart

Question

我试图通过选择处理程序在 Google 折线图中打开一个链接。出于某种原因，我的图表停止呈现，我不太确定为什么(javascript 新手...)。

这是代码在我的 html 中加载的位置:

<pre><code><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--<script type="text/javascript">
Hier den Javascript-Code aus dem unteren Panel einfügen um das Script direkt im Artikel auszuführen
</script>-->
<div id="tt_6_annotation" style="width: 100%; min-height: 300px; height:auto;"></div></pre></code>

这是我的代码:

    google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Monat');
  dataTable.addColumn('number', 'Bewerber');
  dataTable.addColumn('number', 'Stellenangebote');
  dataTable.addColumn({
    type: 'string',
    role: 'tooltip',
    p: {
      html: true // um CSS zu verwenden muss html:true gesetzt werden
    },
  });
  dataTable.addColumn({
  type: 'string',
  role: 'selection',
  }); //um direkt aus dem Datatable mit einem Klick auf einen Knotenpunkt über den select Handler einen Link zu öffnen

  dataTable.addRows([
    ['Jan', 1.370828308, 1.217768314, 'Stuff in my Tooltip', '168184',],
 ['Feb', 1.383085819, 1.28813154387171, 'Stuff in my Tooltip', '168185',],
        ]);


  var options = {
    title: 'Arbeitsmarkt Gesamt 2016 (Knotenpunkt anklicken um Links aufzurufen)',
    titleTextStyle: {fontSize: 20,},
    curveType: 'function',
    legend: 'bottom',
    colors: ['#2646ad', '#f56e12'],
    format: 'decimal',
    lineWidth: 3,
    tooltip: {
      isHtml: true,
      trigger: 'both', //both erlaubt es beim Klick auf den Knotenpunkt den Tooltip zu behalten, so dass man den Link anklicken kann
    },
    vAxis: {
      minValue: 0, // Damit das Diagramm bei 0 beginnt und nicht in einem näheren Bereich
      /*scaleType: 'log', // setzt einen Bereich, der sich um die vorhanden Punkte herum befindet*/
    },
    /*hAxis: {  
    slantedText: true, 
    slantedTextAngle: 30 // um die Beschriftung der x-Achse zu kippen (geht bis 180°) 
},
*/
  };

  var formatter1 = new google.visualization.NumberFormat({pattern:'#.##'});
formatter1.format(dataTable, 1);
  var formatter2 = new google.visualization.NumberFormat({pattern:'#.##'});
formatter2.format(dataTable, 2);



  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);


  //Bad boy isn't working as it should
  // a click handler which grabs some values then redirects the page
  var google.visualization.events.addListener(chart, 'select', function(){
  // grab a few details before redirecting
      var selection = chart.getSelection();
      var row = selection[0].row;
      var col = selection[0].column;
      var link = data.getValue(row, 4);
      location.href = 'http://www.mywebsite.de/' + row;
    });  


}

这是不起作用的部分。它应该获取数据表中的数字，这是链接的一部分，并将其添加到我的 url，这是我的选择的一部分。-function:

/ a click handler which grabs some values then redirects the page
  var google.visualization.events.addListener(chart, 'select', function(){
  // grab a few details before redirecting
      var selection = chart.getSelection();
      var row = selection[0].row;
      var col = selection[0].column;
      var link = data.getValue(row, 4);
      location.href = 'http://www.karriere.de/' + row;
    });  

有什么想法吗？

Answer 1

首先，需要验证一个选择是否存在

'select' 事件在选中和取消选中时触发

在访问数组元素之前验证选择是否存在

请看下面的片段...

google.visualization.events.addListener(chart, 'select', function(){
  var selection = chart.getSelection();
  if (selection.length > 0) {
    var row = selection[0].row;
    var col = selection[0].column;
    var link = dataTable.getValue(row, 4);
    location.href = 'http://www.karriere.de/' + link;
  }
});

同样，没有data role存在于 'selection'(最后一列)

dataTable.addColumn({
  type: 'string',
  role: 'selection',  // <-- should probably be 'label' instead
});