Plotly.js 条形图需要在点击柱状图时添加 onclick 事件。

Question

Plotly.js 条形图需要在点击柱状图时添加 onclick 事件。

javascriptplotly

6

我一直在寻找一种方法，能够在单击柱状图上的特定条时运行特定函数。该函数可以很简单，比如打开一个链接或将图形更改为不同的图形。

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

}

- VincFort

2个回答

1

尝试这个：

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

- Prakash Choudhary

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rambler · Accepted Answer

请尝试以下操作：

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

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