单击点时绘制散点图超链接

Posted 2023-02-24

【中文标题】单击点时绘制散点图超链接

【英文标题】：Plotly Scatterplot hyperlink when point is clicked

【发布时间】：2016-05-13 21:54:22

【问题描述】：

是否可以链接散点图的所有/部分点，以便无论何时单击它们都会打开一个新选项卡并触发链接到该点的超链接？

我在 Django 网络服务器实现中使用 plotly，这意味着 plotly 是用 javascript 呈现的。

【参考方案1】：

您可以使用click handler 来实现这一点。但是在新标签页中打开可能会很困难，因为大多数浏览器总是试图阻止弹出窗口。

var trace1 = 
  x: [1, 2, 3],
  y: [1, 6, 3],
  mode: 'markers',
  type: 'scatter',
  text: ['Plotly', '***', 'Google'],
  hoverinfo: 'text',
  marker:  size: 12 
;

var links = ['https://plot.ly/', 'http://***.com/', 'https://google.com/'];

var data = [ trace1 ];

var layout =  
  title:'Hyperlinked points'
;

var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data, layout);

myPlot.on('plotly_click', function(data)
  if (data.points.length === 1) 
    var link = links[data.points[0].pointNumber];
    
    // Note: window navigation here.
    window.location = link;
  
);

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="myDiv" style="width: 480px; height: 300px;"></div>

【讨论】：

非常感谢，这完全解决了我的问题，我什至可以通过在 'plotly_click' 函数中添加一个 window.open("ulr","_blank") 在新选项卡中打开。