当前位置：文江博客话题详情

如何向 Google 图表散点图上的每组数据点添加不同的网页链接？

发布于 2025-01-08 08:14:28 字数 50 浏览 4 评论 0原文

是否可以将超链接添加到散点图，以便当我单击数据点时它会打开链接？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

別甾虛僞 2025-01-15 08:14:28

我创建了一个 jsfiddle 演示来表明可以做到这一点，但我不能找到一种方法以我喜欢的方式去做。

创建数据集后，我创建了一个数组，其中包含 URL 列表，其顺序与显示的结果的顺序相同。当通过单击某个点触发选择事件时，将执行一个函数，在本例中该函数会将您带到正确的 URL。

数据：

var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight'],
    [ 8, 12 ],
    [ 4, 5.5 ],
    [ 11, 14 ],
    [ 4, 5 ],
    [ 3, 3.5 ],
    [ 6.5, 7 ]
]);

URL：（

var dataUrls = new Array();                
for(var i = 0; i < data.D.length; i++) {
    dataUrls[i] = 'http://www.'+i+'.com';
}

在本示例中，我创建了一个不同的 URL，该 URL 为 http://www.n.com< /a> 对于每个结果，其中 n 是索引）

声明图表后，您可以添加一个事件侦听器，该事件侦听器将在单击某个点时触发。

google.visualization.events.addListener(chart, 'select', function() {
    try {
        window.location = dataUrls[chart.getSelection()[0].row];
    } catch(e) {}
});

这里重要的一点是 chart.getSelection()[0].row，它告诉您这是什么结果，并获取可用于从数组中检索正确 URL 的“索引”。

如果您除了在同一窗口中打开页面之外还要做其他任何事情，那么就会出现一些错误。基本上，单击同一事件两次会引发 TypeError，这就是我将调用包装在 try catch 语句中的原因。

正如我所说，可能还有另一种方法可以做到这一点，但希望这是一个好的起点。

I created a jsfiddle demo to show that it is possible to do this, but I couldn't find a way to do it in the way I would have liked.

After creating a data set, I created an array that has a list of URLs in the same order as the results that are displayed. When the select event is trigged by clicking on a point, a function is executed which in this case takes you to the correct URL.

Data:

var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight'],
    [ 8, 12 ],
    [ 4, 5.5 ],
    [ 11, 14 ],
    [ 4, 5 ],
    [ 3, 3.5 ],
    [ 6.5, 7 ]
]);

URLs:

var dataUrls = new Array();                
for(var i = 0; i < data.D.length; i++) {
    dataUrls[i] = 'http://www.'+i+'.com';
}

(in this example, I've created a different URL that will be http://www.n.com for each result, where n is the index)

Once you've declared your chart, you can then add an event listener that will trigger when a point is clicked on.

google.visualization.events.addListener(chart, 'select', function() {
    try {
        window.location = dataUrls[chart.getSelection()[0].row];
    } catch(e) {}
});

The important bit here is the chart.getSelection()[0].row, this tells you what result this is and gets the 'index' that you can use to retrieve the correct URL from the array.

There is a bit of a bug with this if you were to anything other than open a page in the same window. Basically, clicking on the same event twice throws a TypeError, which is why I've wrapped the call in a try catch statement.

As I said, there might be another way of doing this, but this but hopefully this a good starting point.

回复收藏 0 原文

~没有更多了~