我尝试通过选择处理程序在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中的数字,这是链接的一部分并将其添加到我的url中,这是我的select.-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;
});
有什么想法吗?
答案 0 :(得分:0)
首先,需要验证选择是否存在
选择和取消选择项目时会触发'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;
}
});
此外,'selection'
(最后一栏)
dataTable.addColumn({
type: 'string',
role: 'selection', // <-- should probably be 'label' instead
});