Question

当我点击条形图上的特定栏时，我一直在寻找能够运行特定功能的时间。该功能可以像打开链接一样简单，也可以将图形更改为不同的图形。

在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>

...

我的Javascript是：

function create_graph_barchart(matrix_list){
switch(matrix_list) {

 var zValues=[];
  var date_list;

    case "0":
        zValues = [-2.45,-0.4,1.3,
                2.9,3.9,-5.66,
                0.5,-2.6,-3.2,
                -8.3,-0.5,-3.0];
        date_list = "January 2015"
        break;
    case "1":
        zValues = [3.75,6.6,-2.5,
                6.2,1.3,6.3,
                0.2,7.5,7.3,
                7.7,4.4,5.6];
        date_list = "Febuary 2015"
        break;

.....

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);

}

Answer 1

尝试以下方法：

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

将在图形点击上调用此函数。记录的数据是x轴上条形图的名称。data包含有关click事件的其他元数据。利用它来实现所需的功能

Answer 2

尝试一下：

HTML

<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>

JS

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);
});

Codepen链接：https://codepen.io/prakashchoudhary07/pen/jOPgzdr

当点击栏时，plotly.js条形图需要onclick事件

2 个答案: