選択ハンドラーを介してGoogle Chartにリンクを追加する

Question

選択ハンドラーを介してGoogleの折れ線グラフでリンクを開こうとしました。何らかの理由で私のグラフがレンダリングを停止し、私は本当になぜ（javascript newbie ...）ではないのですか？

コードは私の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; 
    }); 


} 

これは働いていない部分です。それは、DataTableの番号を取得する必要があり、それはリンクの一部であり、私のselect.-機能の一部である私のURL、それを追加します。

/ 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'イベントが発生存在し、非選択

選択を確認する次のコードを参照して配列要素を

にアクセスする前に、存在します。 ..

も、何のdata roleは'selection'（最後の列のために存在しません）

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