Javascript plotly.js条形图在单击条形图时需要onclick事件_Javascript_Plotly

Javascript plotly.js条形图在单击条形图时需要onclick事件

javascript

Javascript plotly.js条形图在单击条形图时需要onclick事件,javascript,plotly,Javascript,Plotly,我一直在寻找一段时间，以便在单击条形图上的特定条形图时能够运行特定功能。该函数可以像打开链接一样简单，也可以将图形更改为其他图形在html文件中，有一个滑块（未显示）用于更改图形数据。但是，图形中的布局和所有其他内容保持不变我想我发现我需要一个图形的嵌入式链接，以便能够在html中放入iframe标记然而，我不知道如何做到这一点，如果这是可能的简而言之，我的HTML是： <!DOCTYPE html> <html> <head> <scr

我一直在寻找一段时间，以便在单击条形图上的特定条形图时能够运行特定功能。该函数可以像打开链接一样简单，也可以将图形更改为其他图形

在html文件中，有一个滑块（未显示）用于更改图形数据。但是，图形中的布局和所有其他内容保持不变

我想我发现我需要一个图形的嵌入式链接，以便能够在html中放入iframe标记

然而，我不知道如何做到这一点，如果这是可能的

简而言之，我的HTML是：

<!DOCTYPE html>

<html>


<head>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="graphing_barchart.js"></script>
<script src="graphing_heatmap.js"></script>
<link rel="stylesheet" href="style.css">


</head>

<body onload="barchart_graph()">
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

var data = [{ 

    x: x_text, // X axis (names)
    y: zValues, // Values (y axis)
    hoverinfo: zValues, 
    type: 'bar',
    orientation:"v",
    marker: {
    color: color_list, // Color of bars
    opacity: 0.6,
    line: {
      color: 'rbg(8,48,107)',
      width: 1
    }},
    yauto: false,
    showscale: true,
  }];

  var layout = {
    font:{
      // Text size and color
      size:16,
      family:'helvetica',
      color: "white"
    },
    annotations: [],
    xaxis:  {
      side: 'bottom',
      orientation: "right"
    },
    yaxis: {
      autosize: true,
      tickfont: "white",
      ticksuffix: "%",
      // Y axis scale
      autorange: false,
      range :[-20,20]
    },
    // Graph position
    margin: {
    l: 90,
    r: 90,
    b: 120,
    t: 20,
    pad: 10
  },
    // Graph background colors
    paper_bgcolor: "transparent", 
    plot_bgcolor:"transparent", 
  };


Plotly.newPlot('myDiv',data,layout);

}

请尝试以下操作：

document.getElementById("myDiv").on('plotly_click', function(data){
    console.log(data.points[0].x);
});

此功能将在图形单击时调用。记录的数据是x轴上条形图的名称。

数据

保存有关

单击

事件的其他元数据。利用它实现所需的功能。

尝试以下操作：

HTML

var myPlot=document.getElementById（'myDiv'）；
风险值数据=[
{
x:[‘长颈鹿’、‘猩猩’、‘猴子’]，
y:[20,14,23]，
类型：'bar'
}
];
Plotly.newPlot（'myDiv'，数据）；
myPlot.on（'plotly_click'，函数（数据）{
var-pts=''；
对于（变量i=0；i


代码笔链接：似乎在任何栏外单击仍会返回有效数据。如何识别用户何时单击图表而不是条形图？
document.getElementById("myDiv").on('plotly_click', function(data){
    console.log(data.points[0].x);
});

<head>
  <!-- Load plotly.js into the DOM -->
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
  <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

var myPlot = document.getElementById('myDiv');

var data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('myDiv', data);

myPlot.on('plotly_click', function(data){
        var pts = '';
    for(var i=0; i < data.points.length; i++){
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }
    alert('Closest point clicked:\n\n'+pts);
    console.log('Closest point clicked:\n\n',pts);
});