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

Question

我一直在寻找能够在单击条形图上的特定条形时运行特定功能。该函数要么像打开 link 一样简单，要么将图形更改为不同的图形。

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

我想我发现我需要一个嵌入的 link 我的图表，以便能够在我的 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);
});

此函数将在图表上调用 click.The 记录的数据是 x 轴上柱的名称。data 保存有关 click [=18= 的其他元数据] 它来实现所需的功能。

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 link: https://codepen.io/prakashchoudhary07/pen/jOPgzdr

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

plotly.js bargraph need onclick event when clicking on bar

javascript

plotly