当单击点时，Plotly散点图超链接

Question

是否可以将散点图中的所有/某些点链接起来，以便每次单击它们时都会打开一个新选项卡并触发该点上的超链接？

我正在使用 Django 服务器实现中的 plotly，这意味着 plotly 是由 JavaScript 渲染的。

- Ignasi

Answer 1

您可以使用点击事件处理程序来实现此功能。 但是，由于大多数浏览器始终尝试防止弹出窗口，因此在新标签页中打开可能会很困难。

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

var links = ['https://plot.ly/', 'http://stackoverflow.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>

- emackey

---

非常感谢，这完全解决了我的问题，我甚至可以通过在'plotly_click'函数中添加window.open("url","_blank")来在新标签页中打开它。 - Ignasi