선택 핸들러를 통해 Google 차트에 링크 추가

Question

선택 핸들러를 통해 Google 선 차트에서 링크를 열려고했습니다. 어떤 이유로 내 차트가 렌더링을 멈추고 왜 (자바 스크립트 초보자 ...) 정말 확실하지 않습니다.

이 코드가 내 HTML에서로드되는 곳이다 :

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; 
    }); 


} 

이 작동하지 않는 일부입니다

<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> 

이 내 코드입니다. 이 링크의 일부인 데이터 테이블의 수를 얻을 내 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' 이벤트가 시작되고, 선택되지 않은

존재를 확인해야한다. ..

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 
});